javascript - 如何防止正文通过推送侧菜单滚动

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; 它看起来会在显示/隐藏滚动条期间在菜单打开/关闭时产生不需要的 body 移动效果，这不是发生在这个阶段。

LE2:congrim.js 文件已替换为 body-lock.min.js通过外包 WordPress，请参阅下面的解决方案。

网站测试页here .

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

就是这样!