Question

我打算在打开全屏叠加导航时阻止身体滚动。我已将一个类show-nav应用于具有属性overflow: hidden的正文，并且它在桌面上运行良好，但它似乎无法在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');
    });

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

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

打开全屏叠加时，防止iPhone上的正文滚动

1 个答案: