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

我有一个水平滚动条在使用中，我想继续使用它，但隐藏滚动条的功能。我不能使用“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/

来源

2014-03-01 Pilgrimish

如果我理解这个正确的，你想要的滚动条来显示，但没有做任何事情，只是触发滚动事件没有做真正的滚动，这样你就可以定位在视一节的开始？

那么，没有办法做到这一点。您不能禁用scsi功能并仍然显示它。但是，您可以将overflow-x设置为“隐藏”。在窗口的底部创建一个固定的div，其中包含滚动条的确切高度和浏览器窗口的宽度。在它内部，创建一个内部div，其高度为0，宽度与父文档相同。你将不得不处理resize事件来调整滚动条div。

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

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

来源

2014-03-01 22:33:01

对不起，奥斯卡。这个句子应该是这样写的：我有一个使用的水平滚动条，我想继续使用它（功能上），但隐藏滚动条。 – Pilgrimish

那么你的意思是你不想看到滚动条，但是你希望'prev'和'next'按钮像现在一样工作，在部分之间跳转？ –

这是正确的。 – Pilgrimish

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

回答

相关问题