Sidr with bodyScrollLock scrolls page to top

Question

I'm using Sidr (https://github.com/artberri/sidr) with bodyScrollLock (https://github.com/willmcpo/body-scroll-lock/). When I'm using bodyScrollLock without Sidr it works fine, but when using it with Sidr it jumps to the top of the page when I click the menu button. I've also tried removing bodyScrollLock from the onOpen and onClose events of Sidr, opening the menu, and then typing bodyScrollLock.disableBodyScroll(); into the JavaScript console and it still scrolls the page to the top, so the issue must be with how Sidr displays the menu. Here is the code I'm using to open Sidr and disable body scrolling:

$( '#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' );
    }
} );

Any ideas how to stop the page from scrolling to the top?

(As a side note, it would be nice if Sidr had the option built in to disable scrolling of the body when the menu is visible.)

Answer 1

Can you just programatically change the overflow to hidden via css and JS to the element that you want and then still use sidr? Because I think what the only thing that body scroll lock does is just an overflow:hidden CSS property, so maybe something like:

$( '#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'});
    }
});