当全屏覆盖打开时，防止 iPhone 上的正文滚动答案

【问题标题】：Prevent body scrolling on iPhone when fullscreen overlay opened当全屏覆盖打开时，防止 iPhone 上的正文滚动
【发布时间】：2014-11-08 08:52:04
【问题描述】：

我试图阻止在我的全屏覆盖导航打开时正文可滚动。我已将 show-nav 类应用到具有 overflow: hidden 属性的 body 上，它在桌面上运行良好，但在 iPhone 上似乎无法运行。

因此，在阅读了有关 stackoverflow 的类似问题后，我尝试使用 e.preventDefault()，它有效，但是当导航关闭时正文仍将保持不可滚动状态，如何在导航关闭时重新启用滚动？

    $( "button.navbar-toggle" ).on( "click", function(e) {
     $('body').on('touchmove', function (e) {
              e.preventDefault();
     });
      $('html').toggleClass('show-nav');
      $('body').toggleClass('show-nav');
    });

【问题讨论】：

你可能想试试 $(this).unbind(e);在您的关闭功能上。你可以阅读它here。

标签： jquery html ios css iphone

【解决方案1】：

感谢@Tim 让我朝着正确的方向前进：这对我有用：

    // On nav opens toggle show-nav class to html/body (overflow: hidden to prevent scroll on desktop) + disable scroll on mobile
    $( "button.navbar-toggle#open-nav" ).on( "click", function(e) {
      $('body').bind('touchmove', function(e){e.preventDefault()});
      $('html').toggleClass('show-nav');
      $('body').toggleClass('show-nav');
    });
    // On nav close toggle show-nav class to html/body (overflow: hidden to prevent scroll on desktop) + enable scroll on mobile        
    $( "button.navbar-toggle#close-nav" ).on( "click", function(e) {
      $('body').unbind('touchmove');
      $('html').toggleClass('show-nav');
      $('body').toggleClass('show-nav');
    });
    // Clicking on any link will close nav  + enable scroll on mobile
    $('.site-nav ul.nav li').on("click", function(e) {
      $('body').unbind('touchmove');
      $('html').toggleClass('show-nav');
      $('body').toggleClass('show-nav');
    });

希望它能帮助遇到同样问题的其他人 :) 干杯！

【讨论】：