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) {
        $(".page__content").scrollTop(divScroll);
        ev.preventDefault();
    });
    

    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

    $(".page__content").css("overflow","none");
    


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

    $(".page__content").css(“overflow”,“none”);

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

    var height;
    
    function lockScroll()
    {
       height=$(".page__content").css("height");
       $(".page__content").css("height","100%");
       $(".page__content").css("overflow","none");
    }
    
    function unlockScroll()
    {
       $(".page__content").css("height",height);
       $(".page__content").css("overflow","auto");
    }
    

    Problem solved!