javascript - Need to prevent user from manually scrolling a web page. (Only navigate using internal links) - Stack Overflow

I am currently designing a webpage that is extremely vertical, my idea was that users would not scroll around the page, but only when they clicked on links with internal anchors (href="#someDiv"), the page would automatically scroll down to that section.

So that the elements of the page are organized into bundles, and the user clicks to go up or down to one section of the single page or another.

I've uploaded the page to the following url: DWS - Prototype

The page is fairly straightforward, and I am using a smooth-scroll jQuery plugin for the automatic scrolling. All I want is for the user to not be able to wander about on his/her own.

I have tried using overflow:hidden, and looked for javascript or jQuery to get this done, but can't seem to find a viable solution. Overflow hidden prevents the page from loading past the screen, so you can't link to the other elements of the page.

I haven't really tested the HTML/CSS beyond Mac OS, but it works fine on Safari, Firefox and Chrome.

I am currently designing a webpage that is extremely vertical, my idea was that users would not scroll around the page, but only when they clicked on links with internal anchors (href="#someDiv"), the page would automatically scroll down to that section.

So that the elements of the page are organized into bundles, and the user clicks to go up or down to one section of the single page or another.

I've uploaded the page to the following url: DWS - Prototype

The page is fairly straightforward, and I am using a smooth-scroll jQuery plugin for the automatic scrolling. All I want is for the user to not be able to wander about on his/her own.

I have tried using overflow:hidden, and looked for javascript or jQuery to get this done, but can't seem to find a viable solution. Overflow hidden prevents the page from loading past the screen, so you can't link to the other elements of the page.

I haven't really tested the HTML/CSS beyond Mac OS, but it works fine on Safari, Firefox and Chrome.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 2, 2011 at 0:01 Asaph 163k2525 gold badges203203 silver badges204204 bronze badges asked Jul 1, 2011 at 23:57 GasparGaspar 3111 silver badge22 bronze badges 3

• 4 Leave the default scrolling available. Disabling it is a bad, bad idea. Also, your page would probably be much cooler if you followed the concept from here: lostworldsfairs./atlantis (I don't think that was the first site to use that, but it's the one I remember) – thirtydot Commented Jul 2, 2011 at 0:20
• 2 This sounds like a bad design to me to try to control scrolling and it's fraught with problems on different sized screens. I'd suggest you add/remove or hide/show things in one page to control what the user sees rather than try to override scrolling control. – jfriend00 Commented Jul 2, 2011 at 4:10
• 1 Don't do it for reasons already stated. – David Oliver Commented Jul 2, 2011 at 7:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can disable the scroll bar on a page using the following css property

body{overflow: hidden;}

This will disable both the scroll bar and the mousewheel (im not sure about Pg Up and Down Buttons)

While you definitely have an interesting concept I think it will be very hard to pull off the way you're wanting. What happens if I have the height of my browser window set so small that I can't see your Navigation menus and I also can't scroll? Chances are I'm just gonna get fed up with your site and leave.

When users see a vertical scrollbar they expect to be able to scroll up and down. Taking that way from users is more likely to frustrate and anger them as opposed to them thinking 'This is really cool'.

That being said you could load up jQuery and do something like this:

$(document).ready(function() {

    $('html, body').scroll(function(e) {
         e.preventDefault();
    });

});

This should prevent the scrollbar from going up or down. disclaimer: I have not tested this.

I suggest you make the sections (partially) collapsible. E.g. like here.