Javascript 如何在不破坏功能的情况下隐藏跨浏览器的滚动条

Javascript 如何在不破坏功能的情况下隐藏跨浏览器的滚动条,javascript,jquery,css,scrollbar,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().

我有一个水平滚动条在使用,我想继续使用它,但隐藏滚动条的功能。我不能使用“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;
});
$j=jQuery.noConflict();
var$panels=$j(“#主>主>文章”);
var panelLeftsArray=$panels.map(函数(){
返回($j(this).position().left);
}).get();
var len=panelLeftsArray.length;
var getCurrentSectionIndex=函数(左){
对于(变量i=0;i=panelLeftsArray[i]&&left0){
索引--;
滚动();
}
返回false;
});

如果我理解正确,您希望滚动条显示,而不是执行任何操作,只需触发滚动事件而不执行真正的滚动,这样您就可以将视口定位在节的开头

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

然后,将滚动处理程序连接到scrollbar div的滚动事件,并使用滚动位置手动滚动主文档


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

对不起,奥斯卡。这句话应该是这样的:我有一个水平滚动条在使用,我想继续使用它(功能上),但隐藏滚动条。那么,你的意思是,你不想看到滚动条,但你想让“prev”和“next”按钮像现在一样工作,在各个部分之间跳转?只需使用“oveflow-x:hidden”。我试过了,按钮都能用。Overflow hidden告诉浏览器不要显示滚动条,但您仍然可以使用Javascript滚动。这很好。我怎样才能保持用触控板滚动的能力?