【问题标题】：Have a scrollable menu, but remove scrolling from body on mobile phones有一个可滚动的菜单，但在手机上从正文中删除滚动
【发布时间】：2017-02-04 21:27:55
【问题描述】：

如果在小屏幕上，我的网站会将其菜单更改为汉堡菜单按钮，如果单击该按钮，则会切换侧边栏，其中包含菜单的堆叠版本。此侧边栏位于普通网站 (position: fixed; z-index: 5;) 的顶部。切换侧边栏时，也会切换主体覆盖。这会阻止您点击实际网站上的任何链接。

我想要做的是删除网站正文的滚动功能，但仍然允许在该菜单侧边栏中滚动，因为例如在 iPhone 4 上它太大而无法适应屏幕。

如果侧边栏处于活动状态（显示），我试图通过在正文上设置 overflow-y: hidden; 来获得此行为。此外，我给侧边栏一个overflow-y: scroll;。这实际上有效，但仅适用于计算机（如果屏幕大小调整为移动设备的宽度）。

不幸的是，这在我的 iPhone 上无效。如果我滚动，我实际上是在滚动正文而不是侧边栏...

那么如何禁用手机的滚动功能呢？

我知道可以在 JavaScript 中执行以下操作，但这不会让您在菜单侧边栏中滚动...

document.ontouchstart = function(e){ 
    e.preventDefault(); 
}

已解决

HTML 结构

<body>
  <div class="mobile-nav closed">
    <!-- Menu -->
  </div>
  <div class="body-overlay"></div>
  
  <!-- Page Content -->
</body>

jQuery 代码

$( '.hamburger' ).on( 'click', function( e ) {
  $( this ).toggleClass( 'is-active' );
  $( '.mobile-nav' ).toggleClass( 'closed' );
  $( '.body-overlay' ).fadeToggle( 300 );
  $( 'body' ).toggleClass( 'no-scroll' ).promise().done( function(){
    var touchScroll = function( event ) {
      event.preventDefault();
    };

    if ( $(this).hasClass( 'no-scroll' ) ) {
      $( '.body-overlay' ).bind( 'touchmove', touchScroll );
      $( '.mobile-nav' ).unbind( 'touchmove', touchScroll );
    }
    else {
      $( '.body-overlay' ).unbind( 'touchmove', touchScroll );
    }
  } );

  e.preventDefault();
} );

此代码运行良好。 $('.hamburger') 是汉堡菜单按钮。它的类.is-active 将其更改为十字架。第二个蚂蚁第三个陈述应该是清楚的。第四种说法是有趣的。在 body 上，我正在切换 .no-scroll 类，该类将 overflow-y: hidden 设置为 body 并将 overflow-y: scroll 设置为菜单。如前所述，这对移动设备没有影响，因此作为回调，我正在触发另一个函数。在该函数中，我首先将函数存储在变量中，然后检查主体是否具有.no-scroll 类（菜单已打开）或是否没有（菜单已关闭）。如果打开菜单，我会阻止滚动 .body-overlay（body 没有 not 工作）但启用导航上的滚动。如果菜单正在关闭，则必须取消绑定阻止，否则滚动仍然会被禁用！

希望对您有所帮助！ :)

【问题讨论】：

document.ontouchstart... 影响整个页面，但是使用 jquery 你可以尝试类似$('body').on({ touchstart: function(e){ e.preventDefault(); } }) 的东西？如果您希望启用点击，甚至可以尝试将touchstart 替换为touchmove。或者，您可以更改 $('body').on... 以专注于您的“body-overlay”div 并添加 e.stopPropogation();在 preventDefault() 之后。很想知道其中任何一个是否有效。
嘿@Sam0，我刚刚更新了我的问题。如果您有兴趣，请查看。

标签： javascript jquery html css iphone

【解决方案1】：

做得好，有效的脚本。几点说明：

最佳实践是使用.on 和.off 而不是.bind，因为这些已被弃用，如果您以后需要更新 jQuery 库，可能会导致问题。
你的touchScroll函数不需要在这些jQuery中函数调用，因为当前它不能被另一个函数访问如果出于某种原因您希望在其他地方再次调用它。
最后，你似乎从未解除touchScroll 与你的绑定 .body-overlay 格？如果这不是必要的（解除绑定），那么最好在你的 if 语句之外声明它，也许在整个之前 js 块以避免重复调用它。

【讨论】：