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

Posted 2023-02-22

【中文标题】如何使用响应式菜单防止正文滚动

【英文标题】：How to prevent body from scrolling with Responsive menu

【发布时间】：2021-05-05 01:49:00

【问题描述】：

我正在尝试将 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-lockposition: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。

【问题讨论】：

你试过用插入页眉页脚插件在每一页添加代码吗？

这还没解决吗？？

嘿，我绝对可以帮你解决这个问题，你能提供一个指向你网站的链接吗？

这看起来是一个简单的问题，但您只是没有给我们提供帮助您的工具，请提供您希望它工作的页面的干净示例（不添加任何代码） ，并解释预期的结果是什么，据我了解，当菜单打开时，您希望该权限不可滚动，并且文本保持原样？

再一次，你希望它工作的页面包含错误的代码，我们无法在不工作的页面上测试东西，创建一个新的示例页面，删除你尝试的 JS 代码有一个新的开始。

【参考方案1】：

将min-height: 100vh; 添加到正文标签。只有当内容超过视口高度时才会显示垂直滚动。

目前，您页面中的文档高度锁定为相对定位的子项的总高度。请参阅下面的屏幕截图。

【讨论】：

我想这会像this？不，它不起作用。无论如何，正如我所说，@OutsourceWordPress 编写的上述代码仅针对特定的page，而不是针对每个页面，这就是为什么它不能以一般方式起作用的原因。无论如何，感谢您的宝贵时间。

【参考方案2】：

我注意到scroll-lock 的类没有被添加到页面中名为“scroll-lock”的html 元素中，而是被添加到了“ilinks-push”页面中。因此，如果检查 html 是否具有此类，将永远不会在您的子页面上变为 true。我重写了代码，所以它会寻找名为 responsive-menu-pro-open 的 inteded 类。

但此外，要使其适用于您的子页面，您需要了解所提供代码中的逻辑。我做了一些更改并添加了 cmets 以使其更清晰：

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

    $('#responsive-menu-pro-button').click(function() 

        /* check if there is a ils item link */
        if ( $('.edge-ils-item-link')[0] ) 
            /* save space above the element to variable */
            var offsetScrollList = $('.edge-ils-item-link:first').offset().top;
        

        /****** Menu gets opened ******/

        if ($('html').hasClass('responsive-menu-pro-open')) 

            /* scroll to top of page */
            windowTop = $(window).scrollTop(); 
            /* add the scroll-lock class */
            $('html').addClass('scroll-lock');
            
            /* check if there is a ils item link */
            if ( $('.edge-ils-item-link')[0] ) 
                /* add the saved space again to look like the same scroll position we started with */      
                $('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); 
            
            
        

        /****** Menu gets closed ******/

        else  
            $('html').removeClass('scroll-lock');

            /* check if there is a ils item link */
            if ( $('.edge-ils-item-link')[0] ) 
                /* again use the saved space to make it look like the start position */
                $('.edge-ils-content-table').css('top', -offsetScrollList +'px');
            

            $('html').scrollTop(windowTop);
        

    ); 
); 

你看到写有check if there is a ils item link的部分了吗？

这将是您子页面上不同的部分。

通过使用.offset().top，我们获得了元素上方的空间。这只有在实际存在 .edge-ils-item-link 类的元素时才有效，这就是我将代码放在 if 子句中的原因。

在代码中，您使用上面的空格将元素放置在正确的位置，因此看起来滚动被阻塞了。

要定位正确的元素，我们需要它的类。

因此，您必须确保每个页面在内容区域周围使用相同的类。这样，您就可以在每个页面上定位它们，而无需在 javascript 中添加额外的 if 子句。

或者，您也可以纠正一些 if 子句并检查页面中的元素。在您的名为“scroll-lock”的页面中，它可能是info-field 的元素，您可以使用它来设置空格。但是在此页面中，您将内容放置在固定位置（不知道为什么，您是否使用了一些花哨的块构建器之类的东西？标记看起来很棒），所以当您将 scroll-lock 类添加到 @ 时，这会导致问题987654334@.

我认为您需要调整其他页面的内容，以便为您解决这个问题。为每个具有不同内容元素的子页面调整 javascript 不是一个好习惯。尝试将每个子页面分成两列（使用 flexbox）。也许左边永远是固定的，右边是静态的，因此可以滚动。根据您问题中提供的信息，我们不知道这一点。

【讨论】：

感谢您的回答。 1-我正在尝试缩小它并收到this error。 2-据我了解，此代码将替换上述公开的代码；我也应该删除.scroll-lockposition:fixed !important;吗？

我还必须提一下，我不是编码员，（js/jquery 零知识）我只是想解决这个问题，找到一种方法让响应式菜单正常工作这个当前的 wp 主题。

谢谢，我已经替换了body-lock.min.js 中的代码，但不幸的是，对this page 没有任何积极影响。我相信这可能意味着什么，但不确定为什么它不起作用..还没有。我在控制台中看到一个错误（顺便说一下，浏览器清除，隐身模式）。

这里：error 和 (details)。我猜这与返回顶部功能有关（？）如果有帮助，我会让代码更新，直到您第一次回复。

我编辑了我的答案。不知道它是否有帮助，如果您一般无法阅读 javascript。此外，您的编辑器生成的标记非常糟糕......您需要确保您的子页面 html 标记具有一定的一致性，否则您无法定位元素。

【参考方案3】：

所以根据要求的行为回归到我所理解的，我认为解决方案很简单，不需要复杂化：

我查看了页面和脚本行为，发现 scroll-lock 类没有被添加到 DOM 中，但我认为你可以简单地依靠类名： responsive-menu-pro-open 在打开菜单后被添加到 HTML 元素中，所以只需尝试为这个类设置一些 CSS 属性，我想你已经准备好了。请确认。

.responsive-menu-pro-open
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

希望这会有所帮助，因为我自己已经尝试过了，而且效果很好:)

【讨论】：

谢谢，这可能是一个起点和一个方法，但这里是video。当菜单关闭时，滑动面板可能会部分滚动（应该保持固定），链接/图像也行为不端，在打开/关闭菜单序列时返回顶部。另一个问题，信息领域也在发生变化。有什么不对劲...

@typo_ 好的，我知道了，让我看看该怎么做

【参考方案4】：

好的，先说一下这个问题：

该插件在您的主 div 上设置 transform: translateX(800px);，但是，转换从其所有子项中删除 position: fixed，因此您所有位置固定的内部 div 基本上都移动到相对位置，因此它们基本上是移到顶部。

过于复杂的解决方案：

您当然可以将用户滚动到顶部，保存他的位置，并为解决此问题做一个真正复杂的解决方案，但是，所有这些都用于左侧菜单？对于一个简单的固定 div 来说，将其他固定 div 推到右侧似乎需要做很多工作。

简单的解决方案： 为什么我们不直接省略变换，而使用 margin-left？

<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>

通过添加上面的 sn-p，您可以模拟您想要的功能，而无需使用 margin-left 进行转换。

注意 - 由于您的页面布局（它有点乱，很多位置固定元素，在其他位置固定元素内），您需要将 margin-left 设置为不同的元素，更改页面布局可以更轻松地应用它，甚至可以使用插件的本机转换功能。

此解决方案可能仅适用于您提供给我们的示例页面，您需要在其他页面上的正确元素上设置 marign-left，但同样，如果您将所有页面布局到单个包装 div 中，将保留该功能，并删除其他固定元素，您将能够创建一个可在页面上工作的单一代码 sn-p。

底线 - 由于您的页面布局，插件存在问题，联系插件开发人员可能会给您更好的答案，他们可能会调查您的特定主题和带来更好的解决方案。 在没有看到您的代码的情况下，这是我能找到的最好的解决方法，而无需尝试使用滚动。

【参考方案5】：

事实上，解决这个问题的最佳方法是使用您正在使用的名为 Responsive Menu 的 Wordpress 插件，它允许您编辑这些选项。我在我的网站上使用它，Couv's Corner。 以下是一些故障排除解决方案：

确保插件是最新的，它最近更新并且更好。 子菜单（嵌套在父类别下的菜单项）是最好的。在任何需要的地方使用它们。在管理仪表板的“菜单”页面中自定义此项。 检查您的主题。 Kadence WP 不错。玩一些，b/c 你的主题可能有冲突。 如果您使用它们，请尝试运行站点数据库/文件优化并清除缓存/cdn。这可能会帮助您解决问题。 希望这可以帮助。请务必查看该插件，以及我如何在 my site 上设置它，看看您的想法。