Monaca Onsen UI Discord Chat Github Repo

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!