javascript - 不要在固定的、可滚动的 div 上使用鼠标滚轮滚动主体

Question

我有一个带有固定 y 滚动侧导航和主体的网页。当我用鼠标滚轮滚动时，指针在侧导航内，有时 body 会根据元素的位置滚动。从技术上讲，由于像 offset-md-3 这样的 Bootstrap 偏移，主体的边距仍然与侧边导航重叠。

当鼠标在侧导航上时，如何阻止主体滚动？我需要不使用任何插件的解决方案。请只使用 jQuery 和 Bootstrap 4。

我最初的直觉是这样的，但是更改为 fixed 导致主体弹回顶部。

我在悬停在 .SideNav 上时禁用了滚动，但我需要保持滚动条以保持连续性。

$(".SideNav").hover(function () {
        $('body').css({
            "position": 'fixed',
            "overflow-y": 'scroll'
        });
    },
    function () {
        $('body').css({
            position: 'inherit',
            "overflow-y": 'scroll'

        });
    });

Answer 1

最初使用 fixed 会导致正文快速返回到从页面顶部滚动。我不得不这样补偿。

    var offset;
    $(".SideNav").hover(function () {
        offset = window.pageYOffset  // Get offset to set position when fixed
        $("main").css("position", "fixed");
        $('body').css({
            "position": 'fixed',
            "overflow-y": 'scroll',
            "top": 0 - offset
        });
    },
        function () {
        $("main").css("position", "inherit");
        $('body').css({
            "position": 'inherit',
            "overflow-y": 'scroll'
        });
        $(window).scrollTop(offset);  // When scroll bar returns, set page to original position
    });