Question

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

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

我最初的直觉就是这样，但是改为固定导致主体重新弹回顶部。

我在悬停在.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
    });

Answer 2

我发现这是一个有趣的情况并阅读你的答案我想知道为什么你还需要更改position和top属性，尽管很可能需要适应你的特定html和css结构。

无论如何，我认为我可以在更简单/最小的场景中包含不同的方法。让我知道你的想法：

＆＃13;

var currentOverflow;
$(".SideNav").hover(()=> {
    currentOverflow = $('body').css('overflow');
	$('body').css({
	    overflow: 'hidden'
    })
},
() => {
    $('body').css({
	    overflow: currentOverflow
	})
});

＆＃13;

.SideNav{
position: fixed;
height: 100vh;
width: 20vw;
background: red;
top: 0;
left: 0
}
span{
margin-left: 30vw
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav" id="fixed"></div>
        <br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span>
		<br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span>
		<br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span>
		<br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span><br><span>a</span>

＆＃13;

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

2 个答案: