使用jQuery而不是CSS防止在按钮单击上滚动页面

我试图通过点击汉堡图标来防止菜单打开时页面滚动。我不想使用css，因为当我创建类“body.noScroll，html.noScroll{overflow:hidden}”时，它会删除滚动条并导致页面变宽，从而导致菜单动画跳转，看起来像垃圾。所以CSS是不可能的。我已经搜索了这个网站，并阅读了多种尝试方法。主要是这一页

1.我的第一次尝试：

function lockScroll(e) {
  e.preventDefault();
}

$('.menuBtn').click(function(){
  if( $('.menu').hasClass('open') ){
    $('body').unbind('mousewheel touchmove', lockScroll);
    $('.menu').removeClass('open');
  }
  else{
    $('body').bind('mousewheel touchmove', lockScroll);
    $('.menu').addClass('open');
  }
});

但这给了我一个jquery错误：

“[干预]无法在被动事件侦听器内防止默认值，因为目标被视为被动”

2.我的第二次尝试似乎效果最好，但仍存在一些问题：

CSS

jQuery

当菜单打开时，这将阻止滚动，但一旦关闭菜单，滚动将重新启用，但会跳回页面顶部

我尝试了第三次尝试，但与第二次尝试相同（跳回到页面顶部）。这是我尝试过的三次尝试的一次尝试-

---

非常感谢您提供的任何帮助。

当菜单被赋予

类时，您可以使用一个变量来记住窗口滚动条的当前位置。打开
，一旦该类被删除，将当前滚动位置设置回交互前的位置

请参见下面的示例：


let currentPos；
$（'.menuBtn'）。单击（函数（）{
if（$（'.menu'）.hasClass（'open'））{
$（'body'）.css（'top'，-（$（window.scrollTop（））+'px'）.removeClass（'noScroll'）；
$（'.menu'）.removeClass（'open'）；
//将滚动条设置回它应该在的位置
$（窗口）.scrollTop（当前位置）；
}否则{
//还记得卷轴在哪里吗
currentPos=$（窗口）.scrollTop（）；
$（'body'）.css（'top'，-（$（window.scrollTop（））+'px'）.addClass（'noScroll'）；
$（'.menu'）.addClass（'open'）；
}
});
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
颜色：白色；
保证金：0；
字体大小：13px；
}
body.noscorl{
位置：固定；
溢出y：滚动；
/*宽度：100%*/
}
menuBtn先生{
边框：2倍实心#FFF；
字体：斜体；
填充物：5px10px；
显示：内联块；
位置：固定；
背景色：#20262E；
顶部：20px；
左：20px；
z指数：999999；
光标：指针；
}
.菜单{
位置：固定；
宽度：100%；
高度：100vh；
背景色：rgba（22,26,31,0.9）；
z指数：99998；
前-100%；
左：0；
过渡：顶部0.5s三次贝塞尔（0.25,0.8,0.25,1）；
}
.菜单.打开{
排名：0；
过渡：顶部0.5s三次贝塞尔（0.25,0.8,0.25,1）；
}
.menu.menuTxt{
宽度：100%；
高度：100vh；
位置：相对位置；
}
.menu.menuTxt ul.menuTxtWrap{
位置：绝对位置；
最高：50%；
左：50%；
z指数：999999；
保证金：0；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
填充：0；
}
.menu.menuTxt ul.menuTxtWrap li{
列表样式：无；
填充：10px0；
}
.info{
填充顶部：35px；
}

菜单

链接1
链接2
链接3
链接4
链接5

页首
Lorem ipsum dolor sit amet，奉献精英。这是一个非常好的例子，它是一个非常好的例子！自然共和国、非自然共和国、劳动人民共和国和其他类似国家
在圣约翰自由运动前，我们需要一个清晰的面部轮廓和一个完整的解决方案。减去化名为德莱尼蒂·诺比斯·雷姆·塞佩，铜制福吉亚

因此，我们应该对罪过表示赞赏，并对除此之外的最低限度的责任表示怀疑，因为我们必须承认自己的过失。如果你是一个真正的人，那么你就必须承认你的错误
大自由分子实验室最小建筑设计师，临时建筑师。这是一个真正的天才发明者

多洛雷姆·特尼乌尔（Dolorem Teneur）提供了非必要的无需指控的证据。普罗维登特照明实验室使用了大量、大量、大量的实践！祝你好运，祝你好运！假设你是智者，那么，自由是非软体动物？
我要坐在临时行政委员会的椅子上，在杜西姆斯广场上犯下了莫利塔的错误，应该是勃兰蒂斯之子！发明者，发明者

这是一个非常好的例子，它是一个巨大的实验室，一个类似的实验室，一个在实验室里工作的实验室，一个在实验室里工作的实验室，一个在实验室里工作的实验室！此外，还应提供临时自由解决方案。实习
由建筑设计师设计的完整无缺积垢积垢，说明了其对身体的耐受性，包括对时间的耐受性。布朗迪提斯·马格尼

福吉亚·维塔提斯，坎迪特，化名尤斯托·纳姆·阿尼米？第五条法定义务人的权利，包括所有人的责任和义务、义务和义务
艾米特。明确地说，铜酸盐、无营养物质的劳动和黑色素的使用，以及无营养物质的小动物耳

在解释错误时，必须有适当的理由，除非假设发生的最小自然量，否则必须有适当的理由！普罗维登特·多洛（Provident odit dolor）是一家准共和国的公司，它在多洛河流域有着广阔的发展前景
我是福吉特，我是智者！阿迪皮斯山扁豆
body.noScroll{
  position: fixed;
  overflow-y: scroll;
}

$('.menuBtn').click(function(){
  if( $('.menu').hasClass('open') ){
    $('body').css('top', - ($(window).scrollTop()) + 'px').removeClass('noScroll');
    $('.menu').removeClass('open');
  }
  else{
    $('body').css('top', - ($(window).scrollTop()) + 'px').addClass('noScroll');
    $('.menu').addClass('open');
  }
});

let bodyScroll = 0;

$('.menuBtn').click(function() {
  if ($('.menu').hasClass('open')) {
    $('body').removeClass('noScroll');
    // The inline styles are not needed anymore
    $('body').removeAttr('style');
    // Scroll back to the saved position
    $(window).scrollTop(bodyScroll);
    $('.menu').removeClass('open');
  } else {
   // Save current scroll position
   bodyScroll = $(window).scrollTop();
    $('body').css('top', -(bodyScroll) + 'px').addClass('noScroll');
    $('.menu').addClass('open');
  }
});