How to programmatically disable page scrolling with jQuery

Question

Using jQuery, I would like to disable scrolling of the body:

My idea is to:

Set body{ overflow: hidden;}
Capture the current scrollTop();/scrollLeft()
Bind to the body scroll event, set scrollTop/scrollLeft to the captured value.

Is there a better way?

Update:

Please see my example, and a reason why, at http://jsbin.com/ikuma4/2/edit

I am aware someone will be thinking "why does he not just use position: fixed on the panel?".

Please do not suggest this as I have other reasons.

"Is there a better way?" - other than letting the browser behave normally? — Fenton, Sep 07 '10 at 07:31
Perhaps meant programmatically? Since it is the firefox top spelling correction suggestion for 'programatically' — Michael Shimmins, Sep 07 '10 at 07:35
@Michael, amusing. And my word-smithy tools all agree that this common bit of programming jargon is not actually an accepted English word. I wonder *why* firefox's speller is suggesting melodramatically. — RBerteig, Sep 07 '10 at 07:38
PS, I just deliberately did not go edit the title to fix the spell check mistake. Its more fun this way. — RBerteig, Sep 07 '10 at 07:39
@Sohnee as if 90% of users really know what the normal behavior for their browser is. — Mansiemans, Feb 17 '12 at 13:21
@Mansiemans - well, think of it this way. Your custom implementation will exist on one website. The non custom implementation will exist on millions of websites. Of these two implementations, which one are they more likely to be familiar with? — Fenton, Feb 17 '12 at 13:54
@Sohnee dude, my mother wouldn't notice for a second if scrolling were temporarily programmatically disabled if for example some photogallery pops open over her Daily Yoga Routine website. We expect so much more from our browsers than our clients is what I'm saying — Mansiemans, Feb 17 '12 at 14:00
@Hailwood For posterity's sake, I think you should include an explanation why `position:fixed` doesn't work for you. It generally seems like a better approach. -- edit: wait, did you mean `position:fixed` on the panel/modal, or on the body? — Matthemattics, Apr 17 '13 at 02:04
@Lübnah being that I posted this 2 years ago, I have no idea why I couldn't use position fixed ;) — Hailwood, Apr 17 '13 at 02:18

gitaarik · Answer 1 · 2016-11-04T13:47:27.450

256

This will completely disable scrolling:

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

To restore:

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

Tested it on Firefox and Chrome.

edited Nov 04 '16 at 13:47

answered Jun 25 '13 at 09:27

gitaarik

42,736
12
98
105

7

Still scrolls with middle mouse button on chrome. – Lothar Sep 09 '13 at 16:58
18

This loses the current scroll position. OP explicitly mentioned about capturing scroll position, so I assume he required that. Anyways, I require it, so this is of limited use to me – zerm Nov 26 '13 at 11:28
10

PS Omitting the `height: 100%` effectively locks the scrolling at the current position without the jumping - on latest Chrome, at least. – zerm Nov 26 '13 at 11:33
Kool.. i did used this for one of the overlay on update of qty.for iphone and android. – Developer Dec 05 '13 at 04:30
2

This is NOT the correct answer. Scroll position is not captured – taylorcressy May 26 '14 at 17:59
This options hasn't disabled scrolling for me, on Chrome at least. – yoda Jun 13 '14 at 16:10
Does not disable scrolling on Chrome. – A.R. Jun 16 '14 at 14:49
disabled on chrome, but then how to reeable? In developer tools I just unchecked heigh 100% checkboxes, and still I see some disabled scroll bars, not like the page was looking before setting height 100% – Dariux Jul 11 '14 at 07:14
This works better than the accepted answer! Thanks! However using "auto" to reenable the scrolling caused the content to disappear for me; replacing "auto" with "" worked instead. – Reado Dec 16 '14 at 10:54
@Reado `auto` for `overflow` or `height`? Or both? – gitaarik Dec 16 '14 at 11:25
@Lothar check my solution which disables middle mouse button too – Pawel May 27 '15 at 10:24
This is the correct answer, thanks. For those who are experiencing two vertical scrollbars when restoring, try $('body').css({ 'overflow': 'auto', 'height': 'auto' }); – Andrea Apr 05 '16 at 10:17
This works for me, and removing the height property locks the scroll position – AGDM Oct 20 '16 at 20:15
This works perfectly, this is should be the accepted answer. – Srihari Sridharan Dec 29 '16 at 15:07
`height: 100%` saved me! Thanks. To fix the scroll jumping to top, record the scroll position before making the overlay e.g `window.body_scroll_top = $(document).scrollTop();`, to restore, `$('body').scrollTop(window.body_scroll_top);` – Ismail Apr 28 '17 at 19:09
1

Works like a charm. This just reminded that both 'html' and 'body' are equally important. – Anjana Silva Oct 12 '17 at 09:29
definitely should be accepted answer. Simple and after 8 different attempts the only one that worked. – Quinn Finney Jan 17 '19 at 21:21
Not working on iPhoneX when I try to block scrolling when angular dialog is opened. – Terry Windwalker Jan 10 '22 at 02:58

score 147 · Accepted Answer · edited Mar 13 '16 at 22:25

147

The only way I've found to do this is similar to what you described:

Grab current scroll position (don't forget horizontal axis!).
Set overflow to hidden (probably want to retain previous overflow value).
Scroll document to stored scroll position with scrollTo().

Then when you're ready to allow scrolling again, undo all that.

Edit: no reason I can't give you the code since I went to the trouble to dig it up...

// lock scroll position, but retain settings for later
var scrollPosition = [
  self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
  self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])

edited Mar 13 '16 at 22:25

Igor Raush

15,080
1
34
55

answered Sep 07 '10 at 07:34

tfe

32,666
2
27
24

2

please see http://jsbin.com/ikuma4/2/edit and explain any reason to me that yours is better? am i missing something (i ask as i can not see any reason for the length of your answer as compared to my example) – Hailwood Sep 07 '10 at 07:55
3

Your approach doesn't work in IE7. I tried that first too. The problem is that it doesn't react to the scroll event quickly enough. It lets the document scroll, then snaps it back when your JS resets the scroll position back where you want it. – tfe Sep 07 '10 at 12:38
1

Also, if body had an overflow of anything other than `auto`, it would be overwritten. I needed to preserve the existing setting, so that adds some overhead too. – tfe Sep 07 '10 at 12:43
Does anyone know why simply styling `html` and `body` with `overflow: hidden` is insufficient? We still end up needing the event handler. – kpozin Jul 18 '11 at 16:41
@kpozin Almost, the body needs to be set to the viewport height. i.e. `$('#bodyId').height($(window).height());` – Talvi Watia Jun 21 '12 at 17:25
Works in Firefox 14, but not on Android ICS. – gavsiu Aug 21 '12 at 06:52
4

This is a fantastic answer. And to make it work on touch devices, check out [this](http://stackoverflow.com/a/10803068/1359306) answer. – Patrick Jan 28 '13 at 10:54
using "html" only worked for me in IE. Chrome needed to use "body". – Pablo Sep 16 '13 at 23:34
Combined this answer with referenced by @Patrick and [this one](https://stackoverflow.com/a/35171163/7196210) to prevent scrolling also on mobile devices – Oksana Romaniv Jan 02 '18 at 07:26
Spent hours looking for a solution and this was the only one that properly disabled scrolling without scrolling to the top of the page first. – Brad Jan 15 '18 at 22:50

score 47 · Answer 3 · answered Jun 20 '14 at 08:07

47

try this

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})

answered Jun 20 '14 at 08:07

Kirill Khrapkov

589
4
6

just what I was looking for... almost. Anyway to disable it during arrow keys? – Cody Jul 02 '14 at 16:13
2

@Cody - combine this with css overflow: hidden – Dariux Jul 11 '14 at 07:19
2

@cubbiu how to reverse it ? – Meer Oct 21 '14 at 02:38
3

You can use `$('#element').off('scroll touchmove mousewheel');` – arnuschky Oct 30 '14 at 19:56
2

Great solution. Although how would you only disable `body` scrolling yet allow scrolling within other child elements that have `overflow: scroll`? – Fizzix Apr 18 '16 at 00:52
I have tried every possible solution THIS WORKED ONLY thank you very much! – Aug 05 '20 at 09:04

score 28 · Answer 4 · edited May 23 '17 at 12:26

I just provide a little tuning to the solution by tfe. In particular, I added some additional control to ensure that there is no shifting of the page content (aka page shift) when the scrollbar is set to hidden.

Two Javascript functions lockScroll() and unlockScroll() can be defined, respectively, to lock and unlock the page scroll.

function lockScroll(){
    $html = $('html'); 
    $body = $('body'); 
    var initWidth = $body.outerWidth();
    var initHeight = $body.outerHeight();

    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    $html.data('scroll-position', scrollPosition);
    $html.data('previous-overflow', $html.css('overflow'));
    $html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);   

    var marginR = $body.outerWidth()-initWidth;
    var marginB = $body.outerHeight()-initHeight; 
    $body.css({'margin-right': marginR,'margin-bottom': marginB});
} 

function unlockScroll(){
    $html = $('html');
    $body = $('body');
    $html.css('overflow', $html.data('previous-overflow'));
    var scrollPosition = $html.data('scroll-position');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);    

    $body.css({'margin-right': 0, 'margin-bottom': 0});
}

where I assumed that the <body> has no initial margin.

Notice that, while the above solution works in most of the practical cases, it is not definitive since it needs some further customization for pages that include, for instance, an header with position:fixed. Let's go into this special case with an example. Suppose to have

<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>

with

#header{position:fixed; padding:0; margin:0; width:100%}

Then, one should add the following in functions lockScroll() and unlockScroll():

function lockScroll(){
    //Omissis   


    $('#header').css('margin-right', marginR);
} 

function unlockScroll(){
    //Omissis   

    $('#header').css('margin-right', 0);
}

Finally, take care of some possible initial value for the margins or paddings.

You have an error in your javascript $body.css({'margin-right': 0, 'margin-bottom', 0}); should be $body.css({'margin-right': 0, 'margin-bottom': 0}); — Johansrk, Oct 07 '13 at 08:59

score 27 · Answer 5 · answered Oct 07 '12 at 09:05

27

you can use this code:

$("body").css("overflow", "hidden");

answered Oct 07 '12 at 09:05

mr.soroush

1,110
2
14
31

8

You can still use the middle mouse button to scroll. – Roger Far Dec 01 '12 at 11:35
2

No, This is ok and no scroll with this! – mr.soroush Jan 09 '13 at 16:59
If you use some extra css you CAN completely disable scrolling, see my answer for more details. – gitaarik Jun 25 '13 at 09:28

score 24 · Answer 6 · answered Apr 10 '15 at 14:31

24

To turn OFF scrolling try this:

var current = $(window).scrollTop();
$(window).scroll(function() {
    $(window).scrollTop(current);
});

to reset:

$(window).off('scroll');

answered Apr 10 '15 at 14:31

Patrick DaVader

2,133
4
24
35

@EveryScreamer no, it makes the screen shake like crazy. Trying to find a workaround. – jarrodwhitley May 08 '19 at 18:18

score 5 · Answer 7 · answered Mar 28 '14 at 12:08

5

I've written a jQuery plugin to handle this: $.disablescroll.

It prevents scrolling from mousewheel, touchmove, and keypress events, such as Page Down.

There's a demo here.

Usage:

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");

answered Mar 28 '14 at 12:08

Josh Harrison

5,927
1
30
44

I've tried to use your disablescroll() plugin to temporarily disable scrolling on hearing the mouswheel/scroll event, but it doesn't work. Any chance you know a way to achieve that effect? – yellow-saint Jun 03 '14 at 17:14
@J.B. I can probably help, but comments are not the best place. Join me in this stack overflow chat and I'll see what I can do: http://chat.stackoverflow.com/rooms/55043/disablescroll-usage – Josh Harrison Jun 04 '14 at 08:12
I'm sorry, but this plugin doesn't even work in your jsfiddle. – markj Jun 23 '14 at 10:15
You can help me to inspect this by telling me which browser/platform it doesn't seem to work in please? – Josh Harrison Jun 26 '14 at 08:20

score 5 · Answer 8 · answered Jun 18 '16 at 11:41

5

You can attach a function to scroll events and prevent its default behaviour.

var $window = $(window);

$window.on("mousewheel DOMMouseScroll", onMouseWheel);

function onMouseWheel(e) {
    e.preventDefault();
}

https://jsfiddle.net/22cLw9em/

answered Jun 18 '16 at 11:41

dzimi

769
3
10
20

It works. Just needs the reset code posted to match [Patricks answer](http://stackoverflow.com/a/29564098/3377049) – Hastig Zusammenstellen Nov 19 '16 at 22:41

Pawel · Answer 9 · 2016-03-13T22:21:25.413

One liner to disable scrolling including middle mouse button.

$(document).scroll(function () { $(document).scrollTop(0); });

edit: There's no need for jQuery anyway, below same as above in vanilla JS(that means no frameworks, just JavaScript):

document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })

this.documentElement.scrollTop - standard

this.body.scrollTop - IE compatibility

score 4 · Answer 10 · edited Oct 18 '17 at 21:34

4

To Hide Scroll: $("body").css("overflow", "hidden");
To Restore Scroll: $("body").css("overflow", "initial");

edited Oct 18 '17 at 21:34

speedplane

15,673
16
86
138

answered Oct 18 '17 at 18:33

Joan Alberto Aguilar Peña

41
1

score 3 · Answer 11 · edited Sep 07 '15 at 15:48

3

Somebody posted this code, which has the problem of not retaining the scroll position when restored. The reason is that people tend to apply it to html and body or just the body but it should be applied to html only. This way when restored the scroll position will be kept:

$('html').css({
    'overflow': 'hidden',
    'height': '100%'
});

To restore:

$('html').css({
    'overflow': 'auto',
    'height': 'auto'
});

edited Sep 07 '15 at 15:48

bencripps

2,025
3
19
27

answered Sep 07 '15 at 15:16

Mescalina

61
3

1

not ```'overflow': 'auto',``` use ```'overflow': 'initial',``` – evtuhovdo Sep 10 '19 at 07:40
1

@evtuhovdo this is what i'm missing . thanks – Franz Dec 02 '20 at 12:45

score 3 · Answer 12 · answered May 17 '11 at 05:59

3

Can't you just set the body height to 100% and overflow hidden? See http://jsbin.com/ikuma4/13/edit

answered May 17 '11 at 05:59

Adrian Schmidt

1,886
22
35

$("html").css({ height: '100%', overflow: 'hidden' }); It simply works, thank you Adrian – Alexey Dec 12 '13 at 15:33

score 2 · Answer 13 · answered May 17 '11 at 05:37

This may or may not work for your purposes, but you can extend jScrollPane to fire other functionality before it does its scrolling. I've only just tested this a little bit, but I can confirm that you can jump in and prevent the scrolling entirely. All I did was:

Download the demo zip: http://github.com/vitch/jScrollPane/archives/master
Open the "Events" demo (events.html)
Edit it to use the non-minified script source: <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
Within jquery.jscrollpane.js, insert a "return;" at line 666 (auspicious line number! but in case your version differs slightly, this is the first line of the positionDragY(destY, animate) function

Fire up events.html, and you'll see a normally scrolling box which due to your coding intervention won't scroll.

You can control the entire browser's scrollbars this way (see fullpage_scroll.html).

So, presumably the next step is to add a call to some other function that goes off and does your anchoring magic, then decides whether to continue with the scroll or not. You've also got API calls to set scrollTop and scrollLeft.

If you want more help, post where you get up to!

Hope this has helped.

score 2 · Answer 14 · edited May 23 '17 at 12:10

2

I put an answer that might help here: jQuery simplemodal disable scrolling

It shows how to turn off the scroll bars without shifting the text around. You can ignore the parts about simplemodal.

edited May 23 '17 at 12:10

Community

1
1

answered Jun 20 '11 at 14:33

mhenry1384

7,538
5
55
74

score 1 · Answer 15 · answered Jul 27 '15 at 13:14

1

If you just want to disable scrolling with keyboard navigation, you can override keydown event.

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});

answered Jul 27 '15 at 13:14

sean

1,644
1
15
14

score 1 · Answer 16 · answered Jun 28 '16 at 01:39

Try this code:

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });

score 1 · Answer 17 · answered Nov 08 '20 at 19:23

I am using the following code to disable scrolling and it works fine

    $('html').css({
      'overflow': 'hidden',
      'height': '100%'
    });

except that on my android tablet, url address bar and top window tags remain visible, and when users scroll up and down, the window also scrolls for about 40px up and down, and shows/hides the url bar and the tags. Is there a way to prevent that and have scrolling fully disabled ?

Appex · Answer 18 · 2012-10-15T23:07:09.043

0

You can cover-up the window with a scrollable div for preventing scrolling of the content on a page. And, by hiding and showing, you can lock/unlock your scroll.

Do something like this:

#scrollLock {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: scroll;
    opacity: 0;
    display:none
}

#scrollLock > div {
    height: 99999px;
}

function scrollLock(){
    $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
    $('#scrollLock').hide();
}

edited Oct 15 '12 at 23:07

answered Oct 15 '12 at 22:54

Appex

9
2

7

Please don't use abbreviations like "u" and "smth". Take the time to spell correctly, for readability. – the Tin Man Oct 15 '12 at 23:00

score 0 · Answer 19 · answered Apr 17 '13 at 01:59

For folks who have centered layouts (via margin:0 auto;), here's a mash-up of the position:fixed solution along with @tfe's proposed solution.

Use this solution if you're experiencing page-snapping (due to the scrollbar showing/hiding).

// lock scroll position, but retain settings for later
var scrollPosition = [
    window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
    window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);

…combined with…

// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])

…and finally, the CSS for .modal-noscroll…

.modal-noscroll
{
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

I would venture to say this is more of a proper fix than any of the other solutions out there, but I haven't tested it that thoroughly yet… :P

Edit: please note that I have no clue how badly this might perform (read: blow up) on a touch device.

score 0 · Answer 20 · answered Apr 30 '14 at 21:52

0

You can also use DOM to do so. Say you have a function you call like this:

function disable_scroll() {
document.body.style.overflow="hidden";
}

And that's all there is to it! Hope this helps in addition to all the other answers!

answered Apr 30 '14 at 21:52

Brendan

1,399
1
12
18

score 0 · Answer 21 · answered Jul 21 '14 at 06:37

This is what I ended up doing:

CoffeeScript:

    $("input").focus ->
        $("html, body").css "overflow-y","hidden"
        $(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
            event.preventDefault()

    $("input").blur ->
        $("html, body").css "overflow-y","auto"
        $(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"

Javascript:

$("input").focus(function() {
 $("html, body").css("overflow-y", "hidden");
 $(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
   return event.preventDefault();
 });
});

$("input").blur(function() {
 $("html, body").css("overflow-y", "auto");
 $(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});

FossilMFC · Answer 22 · 2014-11-20T09:40:51.690

Not sure if anybody has tried out my solution. This one works on the whole body/html but no doubt it can be applied to any element that fires a scroll event.

Just set and unset scrollLock as you need.

var scrollLock = false;
var scrollMem = {left: 0, top: 0};

$(window).scroll(function(){
    if (scrollLock) {
        window.scrollTo(scrollMem.left, scrollMem.top);
    } else {
        scrollMem = {
            left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
            top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        };
    }
});

Here's the example JSFiddle

Hope this one helps somebody.

This one works as it should, with one exception. When the scroll is locked, and i scroll, it kinda twitches a little, before actually locking the scroll... — Teilmann, May 11 '16 at 09:30

score 0 · Answer 23 · answered Jun 20 '18 at 13:36

I think the best and clean solution is:

window.addEventListener('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y);
});

And with jQuery:

$(window).on('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y)
})

Those event listener should block scrolling. Just remove them to re enable scrolling

score 0 · Answer 24 · answered Apr 20 '21 at 15:43

If want to programmatically disable scrolling you can use:

overflow: clip;

If you wanted to disable scrolling for the user you can use:

overflow: hidden;

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

The browser support for the overflow property varies:

https://caniuse.com/?search=overflow

How to programmatically disable page scrolling with jQuery

24 Answers24

Linked

Related