如何通过推入式菜单阻止正文滚动

时间:2018-08-09 23:02:45

标签: javascript jquery html css wordpress

我正在尝试将侧面菜单插件(Responsive Menu)正确实现为wordpress主题。根据{{​​3}}的答案,我设法实现了一种方法,当推式菜单打开时,body会在滚动状态下锁定(header的所有元素都是固定的),除了交互式链接class=edge-ils edge-ils-with-scroll edge-ils-light仍然会在推式菜单打开时变为Up。

我已将该序列保存到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不会在推入式菜单中打开,保持固定在打开菜单之前单击查看器的位置?

请仅关注交互式链接问题,其余场景都很好(headerlogo就位,其背景图片的行为也应如此)。

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

LE2:外包WordPress已将congrim.js文件替换为SO @Congrim,请参见下面的解决方案。

网站测试页body-lock.min.js

3 个答案:

答案 0 :(得分: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
        }      
    }); 
}); 

就是这样!

答案 1 :(得分:0)

您的滚动条不是基于导航器的自然滚动条,您有一个JS交换了类来模拟滚动条(edge-appearededge-upedge-down)。

在推式菜单打开时,这些类将被重置,overflow-hidden不会对此进行更改。

您需要找到哪个JavaScript正在交换这些类并阻止它这样做,我很高兴能得到进一步的帮助,但是您有如此多的JS文件,因此花很多时间来浏览所有这些文件。如果您成功制作了Minimal, Complete, and Verifiable example,请在此处发布。

答案 2 :(得分:0)

请在您的自定义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');
    }
});

希望对您有帮助。

谢谢