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 to be DISABLED during some AJAX event. Later using:

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

I had to enable scrolling again for full page in my AJAX success.

(Like removing scrollbox from scorllbar and disabling scrolling arrows) yet still scrollbar appears in th window. This would prevent from change of page width in meantime.

Is there any possibilitioes to do so? Any help is appriciated. Thanks in advance.

You can probably find the answer using this. http://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it — Yasitha, Sep 17 '13 at 12:39
There is a great answer from @Patrick DaVader: http://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery. Works perfect for me. — chris, Mar 05 '16 at 01:06

score 21 · Answer 1 · edited Sep 17 '13 at 12:47

21

OK here is the Working Code:

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

I used it and its the same what you want.

edited Sep 17 '13 at 12:47

Andrea Ligios

46,329
24
102
208

answered Sep 17 '13 at 12:42

Hassan Sardar

3,885
16
49
91

Are the `position` and `width` really necessary? – gvee Sep 17 '13 at 14:22
4

@gvee yes, the position keeps the body element from moving when scrolling. The width ensures the body fits the screen, but I would add height: 100% as well. – zoltar Feb 13 '15 at 02:37
This is the technique used by Facebook to disable the scrollbar on the main page while a popup is showing by the way – Gyum Fox Aug 29 '17 at 15:11

score 11 · Answer 2 · answered Sep 17 '13 at 12:42

11

Try this

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

answered Sep 17 '13 at 12:42

Ajay

6,233
15
62
122

OP already knows this solution. This solution removes the scrollbar; OP needs it to be visible. – Nicklas Mandrup Frederiksen Sep 22 '20 at 12:48

Varon · Answer 3 · 2013-09-17T13:19:13.993

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)

This man again · Answer 4 · 2017-09-15T12:42:14.037

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:

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;
```

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.

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

4 Answers4

Linked