如何限制鼠标当前悬停的 DIV 元素内的滚动？

Question

我有一个名为scrollable的div，当我将鼠标悬停在其上时，我希望滚动仅限于此div，以便在到达div的顶部/底部后，滚动将停留在该div中。我使用了以下代码：

<div class="scrollable" style="overflow-y: scroll; height: 2px;" 
 onmouseover="document.body.style.overflow='hidden'" 
 onmouseout="document.body.style.overflow='auto'" >
   Some text<br>sometext<br>sometext 
</div>

这样做可以完成工作，但是主滚动条被隐藏后，每次悬停在“ .scrollable”上时，网页看起来很奇怪。

而且使用window.onwheel=function(){return false;}也没有帮助，因为它会阻止任何元素的滚动。

有没有一种方法在保持主页面滚动条可见的情况下，仅在悬停的div上启用滚动而不对其他元素启用?

谢谢

- user3086871

---

我认为你不需要做任何事情，这种行为是默认的。 - Avinash

当我滚动到div的底部或顶部时，继续滚动会移动主页面。 - user3086871

然后让整个页面的滚动条始终处于隐藏状态，类似于这样：https://dev59.com/j2Qn5IYBdhLWcg3wpYj0 - Avinash

或者这个 https://dev59.com/P2oy5IYBdhLWcg3wN7YX - Avinash

我考虑过这个问题，尝试了一下，但在我的网站上看起来效果不佳。我想知道Facebook是如何做到的，当我打开聊天框并在其中滚动时，滚动仅在聊天框内进行，同时保持主页面的滚动条可见且不受影响，即使我在聊天框底部/顶部滚动也是如此。那正是我想要的。 - user3086871

Answer 1

您可以禁用滚动条但不隐藏它，详见此帖子。

使用jQuery，代码如下：

$(".scroll").hover(function() {
  var oldScrollPos = $(window).scrollTop();

  $(window).on('scroll.scrolldisabler', function(event) {
    $(window).scrollTop(oldScrollPos);
    event.preventDefault();
  });
}, function() {
  $(window).off('scroll.scrolldisabler');
});

看看这里。

- TheOnlyError

---

没问题，我很乐意 :) - TheOnlyError

Answer 2

对我来说，希望能够工作。

        $('body').on('mousewheel', '.someDIVClass', (e: any) => {    
            if (e.originalEvent.wheelDelta / 120 > 0) {
                // You can get scroll value here to do other things
            }
            else {
                // You can get scroll value here to do  other things
            }    

            // This will prevent window to scroll
            e.preventDefault();
            e.stopPropagation();    
        });

- Haryono