16

I want to disable scrolling for my webpage, but completely, not just disable scrollbars so 

overflow: hidden

will not work.

Also this workaround does not apply on Macs due to the "soft-scroll" on edges. It will show a terrible shaky animation:

window.onscroll = function () {
window.scrollTo(0,0);
}

Is there any other method to disable scrolling completely?

Karim Geiger
  • 622
  • 1
  • 8
  • 17
  • 2
    Can you show why `overflow: hidden` isn't working for you? Provide some example code. – Brad May 19 '13 at 16:48
  • overflow: hidden just removes the scrollbar but it won't disable scrolling with the scroll wheel (I'm talking about vertical scrolling) – Karim Geiger May 19 '13 at 16:50
  • 1
    overflow: hidden usually works perfect for me. I think you should provide some example like @Brad said. – Darwin Gautalius May 19 '13 at 16:55
  • http://stackoverflow.com/a/10144170/362536 – Brad May 19 '13 at 16:55
  • 1
    Then you need to specify a height. – Omega May 19 '13 at 16:55
  • 3
    Why are you trying this - the browser is their property and therefore it is up to them to scroll. – Ed Heal May 19 '13 at 16:56
  • With overflow hidden you can still click & drag to see the rest of the content. Scrolling doesn't work though (for me). – user2019515 May 19 '13 at 17:00
  • Example: http://jsfiddle.net/67xQZ/ I can't get it to scroll on my Mac, not with a scroll wheel or with the touchpad. I think you need to show a complete example that shows your problem. – JJJ May 19 '13 at 17:04
  • Maybe this throws some light: http://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery – eon May 19 '13 at 17:32
  • @KarimGeiger I know exactly what you are talking about. but I am not sure how to fix it. I would suggest looking at some examples on other sites and looking at the source code maybe that can shed some light. – CMS_95 Dec 15 '13 at 01:15

1 Answers1

49

Presuming the simplified HTML code is:

<html><body><div class=wrap>content...</div></body></html>

Set both body, html to height:100%;

body, html {height:100%;}

Put a div inside body, and set it to stretch across all the body height: 

div.wrap {height:100%; overflow:hidden;}

This will prevent window from scrolling in weird ways, like, pressing mouse wheel and moving it, using anchors, etc.

To remove the scroll bar itself (visually), you should also add:

body {overflow: hidden; }

To disable scrolling via pressing arrow keys on keyboard:

window.addEventListener("keydown", function(e) {
    // space, page up, page down and arrow keys:
    if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);
Sych
  • 1,849
  • 16
  • 19
  • Chances are, if I'm disabling scrolling, I want to use the whole window. This can be done with `body{margin:0}`. Otherwise (at least on my Chrome set-up) you lose a small border. – Adam Chalcraft Sep 08 '19 at 21:24
  • FWIW, I disagree that this topic is a duplicate. The topic pointed to is more about text which overflows to the right, so it's useful for ``. This topic is about the whole view area, so it's useful for ``. Obviously there's a large overlap, but a consequence is that Sych's answer has a low rating there and a high rating here. – Adam Chalcraft Sep 08 '19 at 21:42
  • when the page is bigger and has scroll, and you are in bottom, when disable scroll, it goes to the top of the web, how can u avoid that auto scroll 0 ? – Alberto Acuña Nov 23 '21 at 09:24