Question

这是我遇到的烦恼几次，所以我认为最好先看看它是否有好的方法。我在各个地方都有很多“可滚动”DIV元素的实例，几乎完全按照预期工作，除了鼠标滚轮或跟踪板控制滚动的时候。

主要问题是，一旦div到达其滚动条的底部，该命令就会转移到主滚动条，烦人地改变用户页面位置。我注意到同样的事情发生在本页顶部的“可能已经有你的答案的问题”框中，我正在输入的框也是如此，这让我觉得它是标准的，但是我确定我过去曾使用网站要求我将光标移动到元素之外以滚动主页面。

有没有办法克服这个问题？我很高兴使用Javascript，如果这是最好的解决方案，我最初的想法是某种onmouseover命令可以锁定屏幕直到onmouseout发生但我的JS非常有限，我找不到任何类似的适应。< / p>

我正在使用的DIV元素的一个例子是：

<div id='bodytext' 
style='width:300px; height:300px; z-index:4; visibility: visible; overflow: auto;'>
Data more than 300px high
</div>

提前感谢您提供任何帮助，如果不可能，那么澄清仍然会非常有用！

Answer 1

您可以在可滚动目标元素上侦听滚轮事件，并仅在达到“滚动结束”时阻止默认行为。

var el = document.getElementById("Element");
var wrapper = document.getElementById("Wrapper");
wrapper.addEventListener("wheel", wheelEvent);

function wheelEvent(e){
  var space = (wrapper.scrollHeight - wrapper.offsetHeight) - wrapper.scrollTop;
    if(e.deltaY < 0){
    if(wrapper.scrollTop == 0){
      e.preventDefault();
      e.stopPropagation();
    }
  }else if(space <= 0){
    e.preventDefault();
    e.stopPropagation();
  }
}

这是一个工作示例： https://jsfiddle.net/rivieremanuel/rcxa6csr/4/

Answer 2

您需要查看DOM scroll event并确定当前正在滚动的元素。基本上，一旦您能够确定事件发生在父元素上，您就会想要stop the event。

Answer 3

如果您使用的是jquery，则可以执行类似

的操作

$(document).ready(function(){
  $('#bodytext').on('mouseenter', function()
  {
    $('body').css('overflow', 'hidden');
  });
  $('#bodytext').on('mouseleave', function()
  {
    $('body').css('overflow', 'visible');
  });
});

当您进入框中时，这将自动隐藏正文的滚动条，并在您离开时添加它。

限制滚动到DIV

3 个答案: