如何限制滚动到鼠标当前悬停的div？

Question

我有一个可滚动的 div 名称，每当我将鼠标悬停在它上面时，我希望滚动仅限于此 div，以便在到达 div 的 top/bottom 之后，滚动将停留在 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 上启用滚动，而不在其他悬停上启用滚动，同时保持主页滚动条可见？

谢谢

Answer 1

您可以在不隐藏滚动条的情况下禁用滚动，勾选this post。

使用jQuery，这将导致：

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

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

检查 it。

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();    
        });

如何限制滚动到鼠标当前悬停的div？

How to restrict scrolling to the div that mouse is currently hovering?

html

javascript

css

jquery

hover