如何隐藏滚动条跨浏览器而不破坏功能

时间:2014-03-01 21:48:48

标签: javascript jquery css scrollbar

我有一个水平滚动条正在使用中,我想继续使用它,但隐藏滚动条功能。我不能使用“overflow:hidden”方法,因为这会破坏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;
});

http://jsfiddle.net/Pilgrimish/pB3rB/

1 个答案:

答案 0 :(得分:0)

如果我理解正确,你希望滚动条显示,但不要做任何事情,只需触发滚动事件而不进行真正的滚动,那么你可以将视口放在一个部分的开头吗?

嗯,没有办法做到这一点。您无法禁用scrallbar功能并仍然显示它。但是,您可以将overflow-x设置为“hidden”。创建一个固定的div连接到窗口的底部,具有滚动条的精确高度和浏览器窗口的宽度。在其中,创建一个内部div,其高度为0,宽度与父文档相同。您必须处理resize事件以调整滚动条div。

然后,将滚动处理程序附加到滚动条div的滚动事件,并使用滚动位置手动滚动主文档。

我正在做一些猜测,因为在你的jsfiddle中,滚动条就像一个普通的滚动条。