在绝对的下拉菜单上滚动并防止父 div 也滚动？

Posted 2023-02-23

【中文标题】在绝对的下拉菜单上滚动并防止父 div 也滚动？

【英文标题】：Scrolling on a dropdown which is absolute and prevent the parent div from also scrolling?

【发布时间】：2016-01-27 17:39:32

【问题描述】：

当我在下拉列表中滚动时，如何防止父 div 也滚动。有没有办法在 jquery 或 javascript 上做到这一点？我这样做了：

$('#scrollableDropdown').bind('mousewheel', function (e) 
        var e0 = e.originalEvent,
            delta = e0.wheelDelta || -e0.detail;

        this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
        e.preventDefault();
    );

但我认为它只适用于防止身体滚动..

【问题讨论】：

你能根据你的 html/CSS 和 JQuery 代码创建一个 sn-p 吗？如果您可以创建一个 demo.

也很有帮助。

【参考方案1】：

如下图调用函数名cancelBubble，它会停止事件冒泡。

$('#scrollableDropdown').bind('mousewheel', function (e) 
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
   cancelBubble(e)
);

function cancelBubble(e) 
    var evt = e ? e : window.event;
    if (evt.stopPropagation) evt.stopPropagation();
    if (evt.cancelBubble != null) evt.cancelBubble = true;