javascript - 打开 Offcanvas 菜单时保持 Y 位置

Question

我有一个offcanvas菜单和一个包含内容的容器。当我向下滚动网站并打开和关闭菜单时，我试图将滚动位置保持在我所在的位置。现在，当关闭菜单时，它会滚动回网站顶部。我猜这是由我为容器提供的一些 css 样式引起的，以防止滚动。

当我 console.log offsetY 时，它会在关闭菜单 0 时显示为偏移量。那么我做错了什么？

所以我所拥有的是:

    mainHeader.on('click', '.nav-trigger', function(event){
                // open primary navigation on mobile
                event.preventDefault();

                mainHeader.addClass('nav-open');
                $('.push-content, .offcanvas').addClass('nav-open');
                var offsetY = window.pageYOffset,
                $win = $(window),
               $body = $('.container-fluid') ; // the content container
             // Block scrolling
                $body.css({
                  'position': 'fixed',
                  'top': -offsetY + 'px'
                });
              $win.scrollTop(offsetY);
            });

        $('.mobile-trigger').on('click', function(){ // btn to close menu again
                var offsetY = window.pageYOffset,
                $win = $(window),
                $body = $('.container-fluid') ;
                $body.css({
                 'position': 'relative',
                 'top': -offsetY + 'px'
                });
                mainHeader.removeClass('nav-open');
                $('.push-content, .offcanvas').removeClass('nav-open');

        }); 

非常感谢任何帮助。

Answer 1

我发现创建一个类(例如.no-scroll)并让overflow-y属性隐藏更容易。这将防止内容向任一方向滚动，并且当您关闭菜单时，您可以删除该类。另外，通过这样做，它应该保持当前的滚动位置。