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!