时间戳

首页 > 解决方案 > 带有 bodyScrollLock 的 Sidr 将页面滚动到顶部

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

问题描述

我正在使用 Sidr ( https://github.com/artberri/sidr ) 和 bodyScrollLock ( https://github.com/willmcpo/body-scroll-lock/ )。当我在没有 Sidr 的情况下使用 bodyScrollLock 时，它可以正常工作，但是当我将它与 Sidr 一起使用时，当我单击菜单按钮时，它会跳转到页面顶部。我还尝试从 Sidr 的onOpen和onClose事件中删除 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 有内置选项以在菜单可见时禁用正文滚动，那就太好了。）

标签： jquerysidrbodyscrolllock

解决方案

您是否可以通过 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'});
    }
});

推荐阅读