Question

我通过overflow: auto获得了一个带垂直滚动条的元素。当我在其内部垂直滚动并到达底部时，窗口开始滚动，因为页面内容长于窗口的高度。我可以禁用此行为吗？

// CSS
#container {
  width: 100px;
  height: 300px;
  border: 1px solid #000;
  overflow: auto;
}

// HTML 
<div id="container">
   <div>Foo</div>
   ...
</div>

// Other content, stretching out the page vertically, 
// forcing a scrollbar on the window

示例：http://jsbin.com/zimabuco/1/

Answer 1

当容器悬停时，将主体的溢出设置为隐藏似乎运行良好。

$('div#container').mouseenter(function(event) {
    $('body').css('overflow', 'hidden');
}).mouseleave(function(event) {
    $('body').css('overflow', '');
});

请参阅以下示例，当div悬停时，您会看到滚动条消失。示例http://jsbin.com/sihihewi/3/edit

Answer 2

当您将鼠标悬停在列表上时，这将禁用滚动窗口：

$(document).ready(function(){

  $("#container").hover(function(){

    $('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
    })

  });

});

滚动溢出的元素时禁用窗口滚动

2 个答案: