So deaktivieren Sie das Scrollen des Körpers, wenn der Navbar-Kollaps aktiv ist

Question

Mit Bootstrap 3 habe ich Probleme mit der Deaktivierung des Body-Scroll, wenn das klappbare Nav-Bar-Menü in mobilen Geräten geöffnet ist. Wenn das Minimierungsmenü geöffnet ist und wenn wir darüber wischen, beginnt das Hintergrundelement ebenfalls zu scrollen, was ich nicht möchte. Ich möchte, dass das Hintergrundelement nicht scrollt, wenn wir über das reduzierbare Menü wischen. Das gleiche Problem wird auch in Desktops gesehen.

Answer 1

Eine Möglichkeit, dies mit CSS zu erreichen, besteht darin, den Überlauf der Elemente html und body zu deaktivieren.

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>

Sie könnten eine Klasse erstellen no-scroll und es auf html und body aufgerufen, wenn Sie das Menü öffnen. Entfernen Sie die Klasse, wenn das Menü geschlossen wird.