Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to prevent a page from scrolling?

  • Hi!
    I have a project when the user clicks on a link, a fix div is shown over the page. The problem is that I couldn’t find a way to stop the content underneath from scrolling, which can be distracting.
    Here’s what I tried:

    $(".page__content").on('scroll',function(ev) { ev.preventDefault(); });

    That didn’t work so I tried another strategy:

    var divScroll=$(".page__content").scrollTop();
    $(".page__content").on('scroll',function(ev) {

    On a desktop this works great but on mobile when the user scrolls, the page starts scrolling and then jumps. It’s very distracting.

    Anyone found a way to solve this? Thanks in advance!

  • Did you try


  • @markus said in How to prevent a page from scrolling?:


    Thanks! That alone won’t work but led me to a solution:

    var height;
    function lockScroll()
    function unlockScroll()

    Problem solved!