带有bodyScrollLock的Sidr将页面滚动到顶部

Question

我正在使用Sidr (https://github.com/artberri/sidr)和bodyScrollLock (https://github.com/willmcpo/body-scroll-lock/)。当我在没有Sidr的情况下使用bodyScrollLock时，它工作得很好，但是当我在Sidr中使用它时，当我点击菜单按钮时，它会跳转到页面顶部。我还尝试过从Sidr的onOpen和onClose事件中删除bodyScrollLock，打开菜单，然后在JavaScript控制台中输入bodyScrollLock.disableBodyScroll();，它仍然会将页面滚动到顶部，所以问题一定是Sidr显示菜单的方式。下面是我用来打开Sidr并禁用身体滚动的代码：

$( '#mobile-nav-toggle' ).sidr( {
    name: 'mobile-nav',
    side: 'right',
    displace: false,
    speed: 400,
    onOpen: function () {
        bodyScrollLock.disableBodyScroll( '#mobile-nav' );
    },
    onClose: function () {
        bodyScrollLock.enableBodyScroll( '#mobile-nav' );
    }
} );

有什么办法阻止页面滚动到顶部吗？

(顺便说一句，如果Sidr内置了当菜单可见时禁止滚动正文的选项，那就更好了。)

Answer 1

你能不能通过css和JS将溢出改为隐藏到你想要的元素，然后仍然使用sidr？因为我认为body滚动锁唯一做的事情就是一个溢出:隐藏的CSS属性，所以可能是这样的：

$( '#mobile-nav-toggle' ).sidr( {
    name: 'mobile-nav',
    side: 'right',
    displace: false,
    speed: 400,
    onOpen: function () {
        $( '#mobile-nav' ).css({'overflow': 'hidden'});
    },
    onClose: function () {
        $( '#mobile-nav' ).css({'overflow': 'visible'});
    }
});