Сидр с bodyScrollLock прокручивает страницу вверх - PullRequest
0 голосов
/ 17 января 2019

Я использую Sidr (https://github.com/artberri/sidr) с bodyScrollLock (https://github.com/willmcpo/body-scroll-lock/).). Когда я использую bodyScrollLock без Sidr, он работает нормально, но при использовании с Sidr он переходит на верх страницы когда я нажимаю кнопку меню. Я также попытался удалить bodyScrollLock из событий onOpen и onClose в Sidr, открыть меню, а затем ввести 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 была встроена опция, позволяющая отключить прокрутку тела при отображении меню.)

1 Ответ

0 голосов
/ 07 апреля 2019

Можете ли вы просто программно изменить переполнение на скрытый через 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'});
    }
});
...