我正在使用水平滚动条,我想继续使用它,但隐藏滚动条功能。我不能使用“溢出:隐藏”方法,因为那样会破坏JS功能。有什么方法可以满足所有现代浏览器的要求吗?
$j = jQuery.noConflict();
var $panels = $j('#primary > #main > article');
var panelLeftsArray = $panels.map(function () {
return ($j(this).position().left);
}).get();
var len = panelLeftsArray.length;
var getCurrentSectionIndex = function (left) {
for (var i = 0; i < len; i++) {
if (left >= panelLeftsArray[i] && left < panelLeftsArray[i + 1]) {
return i;
}
}
return len-1;
};
var index = 0;
var handler = function () {
var position = Math.abs($j('#primary #main').position().left);
index = getCurrentSectionIndex(position);
console.log(index);
};
var scroll = function(){
$j('#primary').unbind('scroll', handler);
$j('#primary').scrollTo('#main article:eq(' + index + ')', 800, {
axis: 'x',
onAfter: function () {
$j('#primary').bind('scroll', handler);
}
});
}
$j('#primary').bind('scroll', handler);
$j('.control_next').click(function (e) {
console.log(index);
if (index < len-1) {
index++;
scroll();
}
return false;
});
$j('.control_prev').click(function (e) {
console.log(index);
if (index > 0) {
index--;
scroll();
}
return false;
});
如果我正确理解了这一点,则希望显示滚动条,但不执行任何操作,仅触发滚动事件而不进行真正的滚动,这样就可以将视口放置在节的开头了吗?
好吧,没有办法做到这一点。您不能禁用scrallbar功能,但仍要显示它。但是,您可以将overflow-x设置为“ hidden”。创建一个固定的div,该div附加到窗口底部,并具有滚动条的确切高度和浏览器窗口的宽度。在其内部,创建一个高度为0且宽度与父文档相同的内部div。您必须处理resize事件才能调整滚动条div。
然后,将滚动处理程序附加到滚动条div的scroll事件上,并使用滚动位置手动滚动主文档。
我正在做一些猜测,因为在您jsfiddle中,滚动条的行为就像普通的滚动条。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句