如何在导航栏折叠处于活动状态时禁用正文滚动

Question

使用bootstrap 3，我在移动设备中打开可折叠导航栏菜单时遇到禁用正文滚动的问题。当折叠菜单打开时，如果我们滑过它，背景元素也会开始滚动，这是我不想要的。我希望当我们在可折叠菜单上滑动时，背景元素不应滚动。桌面上也出现了同样的问题。

Answer 1

使用CSS实现此目的的一种方法是禁用html和body元素的溢出。

html, body {margin: 0; height: 100%; overflow: hidden}

<!-- Example HTML which would normally create a scrollbar -->
a<br><br><br><br><br><br><br><br><br><br>
b<br><br><br><br><br><br><br><br><br><br>
c<br><br><br><br><br><br><br><br><br><br>
d<br><br><br><br><br><br><br><br><br><br>

您可以创建一个名为no-scroll的班级，并在打开菜单时将其应用于html和body。菜单关闭时删除课程。