Javascript 有一个可滚动的菜单，但删除移动电话的滚动体

如果在小屏幕上，我的网站将其菜单更改为汉堡包菜单按钮，如果单击该按钮，将切换一个边栏，其中包含一个堆叠版本的菜单。此侧边栏位于普通网站的顶部（

位置：固定；z索引：5；

）。切换侧栏时，也会切换主体覆盖。这会阻止您单击实际站点上的任何链接

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

我试图通过设置

overflow-y:hidden获得这种行为。此外，我给了侧边栏一个
overflow-y:scroll。这实际上是可行的，但只适用于计算机（如果屏幕大小调整到移动设备的宽度）

不幸的是，在我的iPhone上，这没有效果。如果我滚动，我实际上是滚动主体而不是侧边栏

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

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

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

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




解决了的
HTML结构
这段代码运行良好<代码>$（“.hamburger”）
是汉堡菜单按钮。它的class
处于活动状态
将其更改为十字。第二点和第三点应该很清楚。第四句话很有趣。在主体上，我正在切换
.no scroll
类，该类将
overflow-y:hidden
设置为主体，并将
overflow-y:scroll
设置为菜单。如上所述，这对移动设备没有影响，因此作为回调，我正在启动另一个函数。在这个函数中，我首先将一个函数存储在一个变量中，然后检查主体是否有
.no scroll
类（菜单处于打开状态）或是否没有（菜单处于关闭状态）。如果菜单打开，我将阻止在
.body overlay
上滚动（
body
未工作），但启用导航上的滚动。如果关闭菜单，则必须解除“防止”绑定，否则仍将禁用滚动

希望这能有所帮助！：）
 做得好，脚本很有效。请注意：


最佳做法是使用
.on
和
.off
而不是
.bind
已弃用，如果以后需要更新jQuery库，可能会导致问题
您的
touchScroll
函数不需要在这些jQuery中
函数调用，因为当前其他函数无法访问它
如果出于任何原因，你想在别处再打一次电话
最后，您似乎从未将
touchcroll
从您的应用程序中解除绑定
.body overlay
div？如果没有必要（解除绑定），那么最好
在你的if声明之外，或者在整个声明之前声明它
js块以避免重复调用它
document.ontouchstart。。。影响整个页面，但是使用jquery，您可以尝试类似于
$（'body'）的操作？如果您希望启用单击，甚至可以尝试将
touchstart
替换为
touchmove
。或者，您可以更改
$（'body'）。在…
上，将重点放在“body overlay”div上，并添加e.stopPropogation（）；在preventDefault（）之后。我很好奇这两种方法是否有效。嘿@Sam0，我刚刚更新了我的问题。如果你感兴趣，就去看看。
$( '.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();
} );