如何防止页面在使用push-side菜单时滚动

Question

我正在尝试将一个推出式菜单插件（Responsive Menu）正确地实现到WordPress主题中。根据SO @Congrim的回答，我已经成功找到一种方法，在推出式菜单打开时锁定body滚动（包括header固定在所有元素上），除了交互链接class=edge-ils edge-ils-with-scroll edge-ils-light将在推出式菜单打开时仍然向上移动。

我把这个顺序保存在congrim.js文件中，我在functions.php文件中将脚本引入主题：

function lockScroll() {
    if ($('body').hasClass('lock-scroll')) {
        $('body').removeClass('lock-scroll');
    }
    else {
        $('body').addClass('lock-scroll');
    }
}


/* I've implemented `onclick="lockScroll();"` in button element, 
 * using this sequence in the same congrim.js file:
 */    

$(document).ready(function() {
    $('#responsive-menu-pro-button').click(function() {
       lockScroll();
    }); 
});

删除jQuery包装不会在浏览器控制台中产生任何错误（已在Chrome中测试），但是可能仍然是一种在WordPress中包装代码的不良方法。 在这些条件下，不幸的是，overflow: hidden;不起作用，在推送菜单打开时，我无法在CSS文件/部分中使用此类。

.lock-scroll {
    overflow: hidden;
}

这段代码将允许我只使用

.lock-scroll {
    position: fixed;
}

问题： 是否有可能强制代码实现overflow: hidden;*或其他解决方法，以便具有交互式链接class=edge-ils edge-ils-with-scroll edge-ils-light在打开推送菜单时不上移，并保持查看者在打开菜单前单击的位置固定？

请仅关注交互式链接问题，场景的其余部分都正常（header和logo的位置正确，背景图片也正常）。

LE：* overflow: hidden;看起来会在打开/关闭菜单时产生不需要的位移效果，在显示/隐藏滚动条期间，这种情况并未发生。

LE2：通过外包WordPress，congrim.js文件已被替换为body-lock.min.js，请参见以下解决方案。

网站测试页面在此处。

- typo_

Answer 1

请查看下面给出的解决方案。

步骤1：添加此CSS .scroll-lock{position:fixed !important;}。

步骤2：添加此JS。

$(document).ready(function() {
    var windowTop = 0;
    var menuOpen = 0;
    var offsetContainerList = 0;

    $('#responsive-menu-pro-button').click(function() {
        var offsetScrollList = $('.edge-ils-item-link:first').offset().top; 

        if ($('html').hasClass('scroll-lock')) {
            $('#responsive-menu-pro-container').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
                  if (menuOpen==0) {
                      menuOpen = 1;
                      $('html').removeClass('scroll-lock');  
                      $('.edge-ils-content-table').css('top', eval(offsetContainerList)-40+'px'); //change image container top position
                      $('html').scrollTop(windowTop); //scroll to original position
                  }
                  else {   
                      menuOpen = 0;             
                  }
            });
        }
        else {                
            windowTop = $(window).scrollTop();
            offsetContainerList = $('.edge-ils-content-table').offset().top;  
            $('html').addClass('scroll-lock');      
            $('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); //change image container top position
        }      
    }); 
}); 

就是这样！

- Outsource WordPress

---

非常感谢您提供的这个绝妙的解决方案，您真是一个大牛！它运行得非常顺畅和完美。我非常感激，其他人肯定也会很感激这个解决方法！祝一切顺利！ - typo_

Answer 2

请将以下代码添加到您的自定义js文件中。

 jQuery('#responsive-menu-pro-button').click(function(){
    var menu_active = jQuery(this).hasClass('is-active');
    if(menu_active){
        jQuery('body').css('position','fixed');
    }else{
       jQuery('body').css('position','static');
    }
});

希望能对你有所帮助。

谢谢。

- dineshkashera

---

谢谢，我已经更新了 congrim.js 文件，并将您的序列添加到现有代码下面。看起来这样会在菜单关闭时锁定 body，而不是在菜单打开时。请查看此链接：http://www.neuegrid.com/ilinks-push。我做错什么了吗？可以在这里找到该文件：http://www.neuegrid.com/wp-content/themes/anders/assets/js/modules/plugins/congrim.js?ver=4.9.8。 - typo_

你好 @typo_，请只添加一个lockScroll代码，删除文件http://www.neuegrid.com/wp-content/themes/anders/assets/js/modules/plugins/congrim.js?ver=4.9.8中的所有剩余代码。 - dineshkashera

请删除所有代码，仅使用我的代码添加测试，否则会产生问题。 - dineshkashera

请查看此链接，我已经在控制台上进行了检查：https://drive.google.com/file/d/1R5EV1saMYjbTWpVjxhBlqiX3avt78Q40/view - dineshkashera

完成了！我应该在代码下面添加这一行吗？jQuery.fn.init (...)？还是应该删除.lock-scroll {position: fixed;}？仍然无法正常工作（http://www.neuegrid.com/ilinks-push）。我应该用`$`替换`jQuery`吗？（我知道这对于WordPress来说很不寻常，但我已经成功地使用`$`而不是`jQuery`使其他代码正常工作。） - typo_

无论如何，我想这里存在一个误解。在你的视频中，链接是固定的，但不是在滚动到顶部位置或任何其他位置，只是在初始位置。我认为我已经说过“不要往上走” - 进入初始阶段。非常感谢。 - typo_

Answer 3

你的滚动条不是基于自然导航的滚动，你的某个JS在交换类来模拟滚动(edge-appeared,edge-up,edge-down)。

在推动侧边菜单打开时，这些类将被重置，overflow-hidden不会改变这一点。

你需要找到哪个JavaScript正在交换这些类，并阻止它这样做，如果你能成功制作一个最小、完整和可验证的示例，请在这里发布。

- Nomis

---

谢谢，但出于同样的原因，我无法这样做（因为涉及到许多文件）；更重要的是，正如我已经说过的，我不是一个编码人员，我没有能力去编译和从所有这些文件中提取精华...无论如何，感谢您的光临和时间。我很感激。 - typo_

也许你可以尝试询问Responsive Menu支持团队，他们似乎已经在这里遇到了类似的问题（https://responsive.menu/forums/topic/slide-goes-within-behind-page-scroll-push-comes-over-top/）。祝好运！ - Nomis

我已经与@Peter Featherstone讨论过了，但似乎没有太多可以做的，我认为有些人遇到了这个问题并开发了解决方案；无论如何还是谢谢。 - typo_