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

Question

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

Answer 1

html使用 CSS 实现此目的的一种方法是禁用和元素的溢出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菜单关闭时删除该类。