CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
Masud Rana
Masud Rana

Reputation: 630

How to stop body scroll if open menu in mobile?

How can I stop the body scrolling if I open a menu on a mobile device?

function bodyScrollStop() {
  $('.header .navbar .navbar-toggler i').on('click', function (event) {
    $('body').toggleClass("onScroll");
  });
}
bodyScrollStop();

Upvotes: 1

Views: 105

Answers (2)

Hemant
Hemant

Reputation: 1018

Well i believe that you are showing that toggle button on mobile screens only. Then you can try below code.

JS Fiddle Link

JS Code:

function bodyScrollStop() {
  $('.header .navbar .navbar-toggler i').on('click', function (event) {
    $('body').toggleClass("no-scroll");
  });
}
bodyScrollStop();

CSS:

i {
  background: green;
  height: 44px;
  width: 44px;
  display: inline-block;
  color: #fff;
}

.no-scroll {
  overflow: hidden;
}

Now if you click on that toggler body will get dynamic class and will prevent it from scrolling.

Let me know if you need more help.

Upvotes: 0

Manikandan2811
Manikandan2811

Reputation: 841

Plz add this in css..

body.onScroll {
  overflow:hidden;
}

Upvotes: 1

Related Questions