3

这是我遇到过几次的烦恼，所以我认为最好看看是否有解决它的好方法。我在不同的地方有许多“可滚动”DIV 元素的实例，它们几乎完全按照预期工作，除了当鼠标滚轮或触控板控制滚动时。

主要问题是，一旦 div 到达其滚动条的底部，命令就会转移到主滚动条，这会令人讨厌地改变用户页面的位置。我注意到在此页面顶部的“可能已经有你的答案的问题”框也发生了同样的事情，我目前正在输入的框也是如此，这让我认为这是标准发生的事情，但是我确信我过去使用过需要我将光标移到元素之外才能滚动主页的网站。

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

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

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

提前感谢您的帮助，如果不可能，那么澄清仍然非常有帮助！

4

3 回答 3

2

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

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/

于 2017-04-02T17:14:39.010 回答
1

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

于 2012-08-06T13:05:20.820 回答
1

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

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

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

于 2012-08-06T13:05:46.337 回答