How to disable the scrolling of the body when the navbar collapse is active

Question

Using bootstrap 3, i am facing problem with disabling the body scroll when the collapsible nav-bar menu is open in mobile devices. when the collapse menu is open and if we swipe over it, the background element also starts scrolling which i don't want. i want that background element should not scroll when we swipe over the collapsible menu. The same problem is also seen in desktops.

Answer 1

One way to accomplish this with CSS is to disable the overflow of the html and body elements.

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>

You could create a class called no-scroll and apply it to html and body when you open the menu. Remove the class when the menu closes.