How to prevent a page from scrolling?

rcpinheiro

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!

markus

Did you try

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

rcpinheiro

@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!