I would like to know if it is possible to disable all scrolling on a webpage.

I am currently using

html, body { overflow:hidden; }

The issue is that this does not work on iOS devices and if you hold in the mouse wheel and drag it down you can also scroll, so it seems like a very poor solution to the problem

Is there a way to disable all methods of scrolling on all devices and then re-enable it?

I would like to know if it is possible to disable all scrolling on a webpage.

I am currently using

html, body { overflow:hidden; }

The issue is that this does not work on iOS devices and if you hold in the mouse wheel and drag it down you can also scroll, so it seems like a very poor solution to the problem

Is there a way to disable all methods of scrolling on all devices and then re-enable it?

• javascript
• jquery
• ios
• css
• html

• 1 Don't add content which overflows the page...?! Some more context and a use case would help here. – deceze ♦ Commented Jul 11, 2013 at 15:08
• Not positive if this would work, but I would try adding a transparent overlay div that covers the view port. Dragging on iOS would probably try to scroll that div, which wouldn't do anything. – Jason P Commented Jul 11, 2013 at 15:09
• try this: * { overflow:hidden; } – Matías Cánepa Commented Jul 11, 2013 at 15:28
• There page loads asking if you are 21 one or older. It is a single page design, which means all content loads at once. I just want to try my best to prevent users from access any further on the site until they have agreed that they are 21 or older. – Robert E. McIntosh Commented Jul 11, 2013 at 15:51
• 1 I would remended not even showing any content, have an age gateway page for that... – rorypicko Commented Jul 11, 2013 at 15:59

1 Answer 1

I have had this exact same issue, i fixed it with the following;

var disableScroll = false;
var scrollPos = 0;
function stopScroll() {
    disableScroll = true;
    scrollPos = $(window).scrollTop();
}
function enableScroll() {
    disableScroll = false;
}
$(function(){
    $(window).bind('scroll', function(){
         if(disableScroll) $(window).scrollTop(scrollPos);
    });
    $(window).bind('touchmove', function(){
         $(window).trigger('scroll');
    });
});

the touch move is bound to the window as the window scroll event is not fired until touch move is pleted, so this allows a much smoother experience on iOS!

This isn't a perfect solution as you can 'throw' the page, but it will return to desired position when the throw has plete (as the window scroll event will then be fired). This is because iOS browsers strip out a lot of events for performance. also setTimeout and setInterval functions do not fire whilst the page is being thrown, having a loop isn't an option either!

see here http://jsfiddle/8T26k/