How to Fix “overflow:hidden” Doest not Work on Mobile Device

Have you ever tried giving style overflow:hidden; On the body to remove the page scroll? And does the function of hiding the scroll on the body work when attempted with a mobile device?

Usually as a scroll example on a page is omitted when using elements with position: fixed; such as fixed menus, fixed widgets, or others. So when the fixed element is activated the page scroll disappears so the focus of attention on the fixed element.

If you find overflow: hidden; Or remove the scroll on the body does not work on the mobile device, please try this trick by adding also position: relative; On the body. This trick I've tried and work on mobile devices.

We can use the javascript function toggle to give class to body like below and also with CSS style.

 function toggleClassbody() {
  var body = document.body;
  "flow" !== body.className ? body.className = "flow" : body.className = "";
};

Then add the following CSS:

 .flow {
    overflow: hidden;
    position: relative;
}

With the following HTML:

 <button onclick="toggleClassbody()">Hidden scroll</button>

Good luck and hopefully useful.