5

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?

rorypicko
  • 4,194
  • 3
  • 26
  • 43
Robert E. McIntosh
  • 5,557
  • 4
  • 26
  • 35
  • 1
    Don't add content which overflows the page...?! Some more context and a use case would help here. – deceze Jul 11 '13 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 Jul 11 '13 at 15:09
  • try this: * { overflow:hidden; } – Matías Cánepa Jul 11 '13 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 Jul 11 '13 at 15:51
  • 1
    I would recommended not even showing any content, have an age gateway page for that... – rorypicko Jul 11 '13 at 15:59

1 Answers1

6

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 completed, 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 complete (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.net/8T26k/

rorypicko
  • 4,194
  • 3
  • 26
  • 43
  • Thank you very much, I made a few modifications like adding `data-disabled="true"` to the body tag and just update this when the user needs to scroll. this works just as I would expect. Thank you very much for your response. – Robert E. McIntosh Jul 11 '13 at 16:19