javascript - 如何使用响应式菜单防止正文滚动

Question

我正在尝试正确实现 Responsive Menu插件到 wordpress 主题。打开推式菜单时出现此问题，导致 body以垂直滚动移动。
此刻有this template page的解决方案效果很棒，我对结果很满意。
问题:
考虑到Outsource WordPress的答案，它修复了上面指定的页面，是否有可能调整下面的代码，以便在其他模板页面中以更通用的方式使用，例如 here就像已经在运行 here ?
我想 .edge-ils-item-link和 .edge-ils-content-table是变量，但我不知道如何处理和调整它，我已经做了一些测试来替换这些元素但没有积极的结果，也许它不是那么简单，它不仅如此。我也知道edge-wrapper , edge-wrapper-inner , wpb_wrapper在每个页面中都可以找到，这些可能是可以更改解决方案使其可用于每个页面的常见元素。
此外，根据最新版本准备好 jQuery 也很棒(此时我正在使用 jQuery migrate 1.4.1 和旧版本的 Wordpress，以便至少在设计的页面上正常运行)。.scroll-lock{position:fixed !important;}

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

有问题的视频，如果有帮助 here .

Answer 1

好的，首先让我们谈谈这个问题:
该插件正在设置transform: translateX(800px);在您的主 div 上，但是，转换删除 position: fixed从它的所有 child ，所以你所有的位置固定的内部 div 基本上都被移动到相对位置，所以它们基本上被移动到顶部。
过于复杂的解决方案:
您当然可以将用户滚动到顶部，保存他的位置，并为解决此问题做一个真正复杂的解决方案，但是，所有这些都用于左侧菜单？对于一个简单的固定 div 来说，将其他固定 div 推到右侧似乎需要做很多工作。
简单的解决方案:
为什么我们不直接省略变换，而使用左边距呢？

<style>

html.responsive-menu-pro-open {
  overflow-y: hidden !important;
  padding-right: 9px;
} 

#responsive-menu-pro-container {
  position: fixed !important;
}

#responsive-menu-pro-container {
  position: fixed !important;
  transform: none !important;
  margin-left: -800px;

  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

#responsive-menu-pro-button {
  transform: none !important;
  transition: 2.6s ease !important; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1) !important; 
  transition-property: margin-left !important;
}

.responsive-menu-pro-open #responsive-menu-pro-button {
   margin-left: 800px;
}

#responsive-menu-pro-header {
  transform: none !important;
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open #responsive-menu-pro-header {
  margin-left: 800px;
}

.responsive-menu-pro-open .edge-wrapper {
  transform: none !important;
}

.responsive-menu-pro-open .edge-wrapper .edge-wrapper-inner {
  margin-left: 800px;
}

.edge-wrapper .edge-wrapper-inner {
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open .edge-content .edge-ps-navigation {
  margin-left: 800px;
}

.edge-content .edge-ps-navigation {
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open #responsive-menu-pro-container {
  margin-left: 0;
  transition: 2.6s ease; 
  transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1); 
  transition-property: margin-left; 
}

.responsive-menu-pro-open .edge-back-to-top-text {
  display: none;
}

</style>

通过添加上面的代码片段，您可以模拟您想要的功能，而无需使用 margin-left 进行转换。
注意 - 由于您的页面布局(它有点乱，很多位置固定元素，在其他位置固定元素内)，您需要将 margin-left 设置为不同的元素，更改页面布局会更容易应用它，甚至使用插件的 native 转换功能。
此解决方案可能仅适用于您提供给我们的示例页面，您需要在其他页面上的正确元素上设置 marign-left，但同样，如果您将所有页面布局到单个包装器 div 中，它将保存功能，并删除其他固定元素，您将能够创建一个适用于页面的代码片段。
底线 - 由于您的页面布局，插件存在问题，联系插件开发人员可能会给您更好的答案，他们可能会研究您的特定主题并带来更好的解决方案。
在没有看到您的代码的情况下，这是我能找到的最好的解决方法，而无需尝试使用滚动。