Question

我试图调整Bootstrap轮播以使用鼠标滚轮。到目前为止，jQuery看起来像这样：

$('#thumbnailCarousel').bind('mousewheel', function(e){
  $(this).carousel('next');
});
$('#thumbnailCarousel').mouseover(function() {
  $('body').css('overflow-y','hidden');
});
$('#thumbnailCarousel').mouseleave(function() {
  $('body').css('overflow-y','scroll');
});

第一部分使画廊可以用鼠标滚轮滚动。问题是身体在同一时间滚动，所以我给了它＆＃34;溢出-y：隐藏＆＃34;在鼠标悬停。

这几乎是我现在想要的，除了溢出：隐藏滚动条明显消失，布局跳到右边。它真的很丑，所以有什么方法可以防止身体滚动同时保持滚动条的位置？

Answer 1

我不确定这是否是最好的解决方案，但是您可以轻松地向主体添加填充，当它被隐藏时，滚动条的宽度完全相同，这将消除滑动。以下代码是一个示例：

$('#thumbnailCarousel').mouseover(function() {
  $('body').css('overflow-y','hidden');
  $('body').css('padding-right', '17px');
});
$('#thumbnailCarousel').mouseleave(function() {
  $('body').css('overflow-y','scroll'),
  $('body').css('padding-right', '0px');
});

请参阅此工作： http://jsfiddle.net/2gkn9/1/

...动态滚动条宽度： http://jsfiddle.net/2gkn9/2/

注意 - 这当然没有完成，因为滚动条的宽度会在浏览器和设备之间发生变化。因此，您要确保动态获取滚动条的宽度。我找到的第一个解决方案是：How can I get the browser's scrollbar sizes?

希望有所帮助！

Answer 2

尝试：

$('#thumbnailCarousel').bind('mousewheel', function(e){
  $(this).carousel('next');
  e.stopImmediatePropagation();
  e.stopPropagation();
  e.preventDefault();
});

如何停止身体滚动但保持滚动条？

2 个答案: