如何通过推侧菜单防止主体滚动 [英] How to prevent body from scrolling with push-side menu

问题描述

我正在尝试正确实施推入式菜单插件(响应菜单)成为一个WordPress主题.根据 SO @Congrim 的答案，我设法实现了一种方法，可以在按下-菜单已打开(固定了所有元素，包括header)，但交互式链接class=edge-ils edge-ils-with-scroll edge-ils-light仍会在推式菜单打开时变为向上".

I am trying to properly implement a push-side menu plugin (Responsive Menu) into a wordpress theme. Based on SO @Congrim answer, I've managed to achieve a way to lock the body at scroll when push-menu is open (with all the elements including the header fixed) except the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light which will still go Up at push-menu open.

我已将此序列保存到congrim.js文件中，并将脚本排入了functions.php文件中的主题中:

I've saved this sequence into congrim.js file, I've enqueued the script into the theme in functions.php file:

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文件/部分中使用此类:

Removing the jQuery wrap will not give any error in browser console (tested in Chrome) may be still a bad approach to wrapp the code like this in wordpress (?) In these conditions, unfortunately, overflow: hidden; doesn't apply, at push-side menu open, I can't use this class in CSS file/section:

.lock-scroll {
    overflow: hidden;
}

该代码仅允许我使用

.lock-scroll {
    position: fixed;
}

问题:
是否有可能迫使代码实现 overflow: hidden; *或任何其他解决方法，以使交互式链接class=edge-ils edge-ils-with-scroll edge-ils-light不会在推侧菜单中打开，而是固定为在打开菜单之前单击查看器的位置?

The question:
Is there any possibility to force the code to implement overflow: hidden;* OR any other a workaround in order to have the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light not going up at push-side menu open, to remain fixed at the position the viewer is clicked before opening the menu?

请仅关注交互式链接问题，其余场景都很好(header和logo设置在应有的位置，背景图片的运行也应在其位置).

Please focus on the interactive links issue only, the rest of the scene is fine (header and the logo are in place like it should be, the background pictures are acting like it should as well).

LE:* overflow: hidden;在显示/隐藏滚动条期间，似乎在菜单打开/关闭时会产生不必要的body移位效果，此阶段未发生.

LE: *overflow: hidden; it looks like will produce an unwanted body shifting effect at menu open/close, during the show/hide scrollbar, which is not happening in this stage.

LE2:congrim.js文件已替换为

LE2: congrim.js file has been replaced with body-lock.min.js by Outsource WordPress, please see the solution below.

网站测试页此处.

推荐答案

请检查下面给出的解决方案.

Please check the solution given below.

步骤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
        }      
    }); 
}); 

就是这样！

这篇关于如何通过推侧菜单防止主体滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！