如何在不隐藏正文滚动条的情况下在固定 div 上滚动时禁用正文滚动？

Posted 2023-02-23

【中文标题】如何在不隐藏正文滚动条的情况下在固定 div 上滚动时禁用正文滚动？

【英文标题】：How to disable scroll of body while scrolling on a fixed div without hiding scroll bar of body?

【发布时间】：2018-08-02 18:44:28

【问题描述】：

当我在固定的 div 上滚动时，如何防止滚动正文。我试过overflow:hidden of body，它工作得很好，只是当滚动条被移除时页面在晃动。有没有办法保持滚动条并防止滚动？

【问题讨论】：

如果你能提供你的代码会很好（最好是带有 jsfiddle 或类似的链接）。

你有例子吗？

【参考方案1】：

js fiddle 用于具有 2 个 p 元素和一个 div 的简单主体。如您所见，如果您在 div 内滚动，则正文无论如何都不会滚动。无需将溢出设置为隐藏。只需确保 div 本身已将溢出-y 设置为滚动即可。 CSS 在下面的 div 上。 body 上不需要 css，也不需要 javascript

.theDiv
    max-height: 300px;
    overflow-y: scroll;

【参考方案2】：

我用这段代码解决了这个问题：

<script>
    $(document).ready(function()

    $(document).on('mousewheel',".dropdown-menu-rightt", function(e)
        e.stopPropagation();
       $(this).scrollTop($(this).scrollTop()-e.originalEvent.wheelDeltaY);
      //prevent page fom scrollin
      return false;
   );
   );
   </script>