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吗？因为我认为主体滚动锁定所做的唯一一件事就是一个溢出：隐藏的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'});
    }
});

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

1 个答案: