Question

在我们的网站上，当屏幕上显示警报或其他弹出窗口时，我们会弹出一个叠加层。添加此叠加层后，我们会使用

删除滚动条

 $('html,body').bind('mousewheel DOMMouseScroll', function (event) {
     event.preventDefault();
 });

但是，有一个特定的叠加层，其内部<div>足够大，我们希望允许滚动。滚动条正确位于div中，但由于上面的行，鼠标滚轮不起作用。有没有办法重新添加绑定以使用鼠标滚轮滚动我想要的div而不是整个页面？

Answer 1

首先检查事件目标，如果它是您仍想让滚动不执行preventDefault调用的元素

$('html,body').bind('mousewheel DOMMouseScroll', function (event) {
    if(event.target == document.getElementById("#someDiv") ) {
        return;
    }
    event.preventDefault();
});
// To also check children
$('html,body').bind('mousewheel DOMMouseScroll', function (event) {
    if(event.target == document.getElementById("#someDiv") || 
           $(event.target).closest("#someDiv").length == 1  ) {
        return;
    }
    event.preventDefault();
});

如果您滚过div的顶部或底部，虽然这样会最终滚动页面。有一种方法是在html / body上放置overflow:hidden的css样式以防止滚动实际页面

function onDisplayPopup(){
    $("html,body").css({overflow:"hidden"});
}

如何重新绑定特定div以允许滚动

1 个答案: