0

我正在使用 Sidr ( https://github.com/artberri/sidr ) 和 bodyScrollLock ( https://github.com/willmcpo/body-scroll-lock/ )。当我在没有 Sidr 的情况下使用 bodyScrollLock 时,它可以正常工作,但是当我将它与 Sidr 一起使用时,当我单击菜单按钮时,它会跳转到页面顶部。我还尝试从 Sidr 的onOpenonClose事件中删除 bodyScrollLock,打开菜单,然后输入bodyScrollLock.disableBodyScroll();JavaScript 控制台,它仍然会将页面滚动到顶部,所以问题一定是 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 有内置选项以在菜单可见时禁用正文滚动,那就太好了。)

4

1 回答 1

0

您是否可以通过 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'});
    }
});
于 2019-04-07T11:58:25.027 回答