logo标签列表

如何在滚动DIV元素时防止页面滚动？

jquerymousewheel
99

我已经检查并测试了各种防止div内部滚动条滚动的函数，并结合了一个应该能够正常工作的函数。

$('.scrollable').mouseenter(function() {
    $('body').bind('mousewheel DOMMouseScroll', function() {
        return false;
    });
    $(this).bind('mousewheel DOMMouseScroll', function() {
        return true;
    });
});
$('.scrollable').mouseleave(function() {
    $('body').bind('mousewheel DOMMouseScroll', function() {
        return true;
    });
});
  • 这将停止所有滚动，而我希望在容器内仍然可以滚动
  • 鼠标离开后也不会停止

有什么想法或更好的方法吗？

你将鼠标滚轮的返回值设置为false，这可能是问题所在。我猜想你的容器在body内部，对吗？ - Ricardo Binns
也许我应该澄清一下。当鼠标在元素'.scrollable'内部时，应该停用body的滚动功能。 - RIK
4
能否用纯 CSS 而不使用 JavaScript 来完成这个操作？ - chharvey
有一种更好的方法使用normalScrollElements选项 https://github.com/alvarotrigo/fullPage.js#options - sherif
也许可以使用CSS的overscroll-behavior？这是一个相对较新的功能，因此旧浏览器和Safari（Mac/iOS）不支持。 - rejnok
显示剩余2条评论
14个回答
0

这里有一个插件，可以在滚动特定的 div 时防止父级滚动，并且具有许多可玩的选项。

在这里查看：

https://github.com/MohammadYounes/jquery-scrollLock

使用方法

通过JavaScript触发滚动锁定：

$('#target').scrollLock();

通过标记触发滚动锁定：

    <!-- HTML -->
<div data-scrollLock
     data-strict='true'
     data-selector='.child'
     data-animation='{"top":"top locked","bottom":"bottom locked"}'
     data-keyboard='{"tabindex":0}'
     data-unblock='.inner'>
     ...
</div>

<!-- JavaScript -->
<script type="text/javascript">
  $('[data-scrollLock]').scrollLock()
</script>

查看 演示

0

这是 Vidas 的答案的纯 JavaScript 版本，el$ 是您正在滚动的飞机的 DOM 节点。

function onlyScrollElement(event, el$) {
    var delta = event.wheelDelta || -event.detail;
    el$.scrollTop += (delta < 0 ? 1 : -1) * 10;
    event.preventDefault();
}

确保您不会多次附加事件！这是一个例子，

var ul$ = document.getElementById('yo-list');
// IE9, Chrome, Safari, Opera
ul$.removeEventListener('mousewheel', onlyScrollElement);
ul$.addEventListener('mousewheel', onlyScrollElement);
// Firefox
ul$.removeEventListener('DOMMouseScroll', onlyScrollElement);
ul$.addEventListener('DOMMouseScroll', onlyScrollElement);

警告，该函数需要是一个常量，如果您在每次附加之前重新初始化函数，即var func = function (...) ，那么removeEventListener将无法工作。

0

您可以不使用JavaScript来实现此功能。您可以将两个

元素的样式设置为position: fixed和overflow-y: auto。如果它们重叠，您可能需要通过设置其中一个的z-index来使其高度更高。

这里是CodePen上的一个基本示例。

0

你所需要的只有

e.preventDefault();

在子元素上。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接