How to DISABLE scrollbar in webpage? (not HIDE scrollbar)

Question

using:

$(\'body,html\').css(\"overflow\",\"hidden\");

the scrollbar in the page was able to hide completely. But i want the scroll bar just

Answer 1

If you want to disable the scrollbar click- and drag-function you can render a hidden div in front of the scrollbar with position: fixed; top: 0; right: 0; height: 100%; width: 25px;

http://jsfiddle.net/Bg9zp/ (htm-class could be your html/body)

So it is disabled for clicks, but the scroll-functionality is'nt disabled. (you can scroll with mousewheel and with "select text by pulling mouse out of the textbox")

If you want to disable the scroll-functionality, you have to add another div that disable user input without the "disabled-opacity":

http://jsfiddle.net/dKP53/ (htm-class could be your html/body)

Answer 2

Try this

<style type="text/css">
  body {
         overflow:hidden;
       }
</style>

Answer 3

OK here is the Working Code:

body
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

I used it and its the same what you want.

Answer 4

I had the same problem. I think there isn't a solution with CSS because it's not implemented directly.

I have found 2 solutions, but I like the second one more:

1. Set the margin by yourself with JS and not with CSS. The scrollbar has a width of 17px, so the margins you get, like in the code sample. when you don't need the scroll lock, just set margin:auto; overflow-y:auto; again. The disadvantage of this method is, when the user zooms in, he maybe can't see the rest of the div.

   margin-left = (bodywidth - sitewidth) / 2 - 17;
   margin-right = (bodywidth - sitewidth) / 2 + 17;
   overflow-y:hidden;
   

2. Lock the scrolling with JS. Take the window.onscroll-event. Take the scrollMethod2, it's more difficult, but it's better in nearly any way. This works perfectly for me without lag (doesn't 'boomerang' you back, you really stay at the scroll position (scrollMethod) or in the scrollable part (scrollMethod2)). Here a sample:

   // scroll lock needed? Set it in your method
   var scrollLock = false;
   window.onresize = function() {
       if (scrollLock) {
           scrollMethod();
       }
   }
   
   // Set here your fix scroll position
   var fixYScrollPosition = 0;
   // this method makes that you only can scroll horizontal
   function scrollMethod(){
       // scrolls to position
       window.scrollTo(window.scrollX, fixYScrollPosition); // window.scrollX gives actual position
   }
   
   // when you zoom in or you have a div which is scrollable, you can watch only the height of the div
   function scrollMethod2() {
       var windowHeight = window.innerHeight;
       // the actual y scroll position
       var scrollHeight = window.scrollY;
       // the height of the div under the window
       var restHeight = scrollableDivHeight - (scrollHeight + windowHeight);
       // the height of the div over the window
       var topDivHeight = scrollHeight - /* the height of the content over the div */;
       // Set the scroll position if needed
       if (restHeight <= 0) {
           // don't let the user go under the div
           window.scrollTo(window.scrollX, scrollHeight + restHeight);
       }
       else if (scrollHeight - /* the height of the content over the div */ < 0) {
           // don't let the user go over the div
           window.scrollTo(window.scrollX, scrollHeight - topDivHeight);
       }
   }
   

Hope everything is correct. Thank you for reading, hope this helps you or gave you an idea, how to do it :)

EDIT: You can also hide the standard scrollbar and replace it with a custom one. Here you can find some examples.