Prevent BODY from scrolling when a modal is opened

Question

I want my body to stop scrolling when using the mousewheel while the Modal (from http://twitter.github.com/bootstrap) on my website is opened.

I've tried to call the piece of javascript below when the modal is opened but without success

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

Please note our website dropped support for IE6, IE7+ needs to be compatible though.

This is 12 years old. The latest way to do this is with css. On the element that has scroll you can now add the new overflow-scroll property: overscroll-behavior: contain . Support is full: caniuse.com/css-overscroll-behavior — Gregg Od
– Gregg Od, Commented Jun 30, 2024 at 6:06

Clint Warner · Accepted Answer · 2023-05-18 17:44:13Z

Bootstrap's modal automatically adds the class modal-open to the body when a modal dialog is shown and removes it when the dialog is hidden. You can therefore add the following to your CSS:

body.modal-open { overflow: hidden; }

You could argue that the code above belongs to the Bootstrap CSS code base, but this is an easy fix to add it to your site.

Update 8th feb, 2013
This has now stopped working in Twitter Bootstrap v. 2.3.0 -- they no longer add the modal-open class to the body.

A workaround would be to add the class to the body when the modal is about to be shown, and remove it when the modal is closed:

$("#myModal").on("show", function () { $("body").addClass("modal-open"); }).on("hidden", function () { $("body").removeClass("modal-open") });

Update 11th march, 2013 Looks like the modal-open class will return in Bootstrap 3.0, explicitly for the purpose of preventing the scroll:

Reintroduces .modal-open on the body (so we can nuke the scroll there)

See this: https://github.com/twitter/bootstrap/pull/6342 - look at the Modal section.

this does not work anymore in bootstrap 2.2.2. Hopefully .modal-open will come back in the future... github.com/twitter/bootstrap/issues/5719
@ppetrid I don't expect it to return. Based on this writing: github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes (look at the bottom). Quote: "No more inner modal scrolling. Instead, modals will grow to house their content and the page scroll to house the modal."
@Bagata Cool - the modal-open will return in Bootstrap 3, so when that launches it should be safe to remove the above code.
This is why one should keep scrolling down, if the chosen answer doesn't satisfy you, there are chances that you are gonna find gems like these. didnt expect a 97+ voted answer burried so deep under other less liked comments.
the problem with this is that to prevent the document from scrolling to the top when a modal is opened you needed to add body.modal-open{overflow:visible}. Your solution works at the moment, with the downside that the document scrolls to the top once a modal is openen

Clint Warner · Accepted Answer · 2023-05-18 15:34:17Z

The accepted answer doesn't work on mobile (iOS 7 w/ Safari 7, at least) and I don't want MOAR JavaScript running on my site when CSS will do.

This CSS will prevent the background page from scrolling under the modal:

body.modal-open { overflow: hidden; position: fixed; }

However, it also has a slight side-affect of essentially scrolling to the top. position:absolute resolves this but, re-introduces the ability to scroll on mobile.

If you know your viewport (my plugin for adding viewport to the <body>) you can just add a css toggle for the position.

body.modal-open { /* block scroll for mobile; */ /* causes underlying page to jump to top; */ /* prevents scrolling on all screens */ overflow: hidden; position: fixed; } body.viewport-lg { /* block scroll for desktop; */ /* will not jump to top; */ /* will not prevent scroll on mobile */ position: absolute; }

I also add this to prevent the underlying page from jumping left/right when showing/hiding modals.

body { /* STOP MOVING AROUND! */ overflow-x: hidden; overflow-y: scroll !important; }

this answer is a x-post.

Thanks! Mobiles (at least iOS and Android native browser) were giving me a headache and wouldn't work without the position: fixed on the body.
Thanks for also including the code for preventing the page from jumping left/right when showing/hiding modals. This was extremely useful and I verified it fixes an issue I was having on Safari on an iPhone 5c running iOS 9.2.1.
In order to fix scrolling to top, you can record position before adding the class, then after class is removed, do window.scroll to recorded position. This is how I fixed it for myself: pastebin.com/Vpsz07zd.
Though I feel this would only fit very basic needs, it was a useful fix. Thanks.
Here's how I did it to retain the scroll position with jquery: js const currPageScrollPos = $(window).scrollTop() $("body").removeClass("show_overlay") $(window).delay(5).scrollTop(currPageScrollPos)

Mehmet Fatih Yıldız · Accepted Answer · 2012-11-14 23:01:46Z

Simply hide the body overflow and it makes body not scrolling. When you hide the modal, revert it to automatic.

Here is the code:

$('#adminModal').modal().on('shown', function(){ $('body').css('overflow', 'hidden'); }).on('hidden', function(){ $('body').css('overflow', 'auto'); })

Kirk Beard · Accepted Answer · 2018-05-31 00:08:28Z

You need to go beyond @charlietfl's answer and account for scrollbars, otherwise you may see a document reflow.

Opening the modal:

Record the body width
Set body overflow to hidden

Explicitly set the body width to what it was in step 1.

var $body = $(document.body); var oldWidth = $body.innerWidth(); $body.css("overflow", "hidden"); $body.width(oldWidth);

Closing the modal:

Set body overflow to auto

Set body width to auto

var $body = $(document.body); $body.css("overflow", "auto"); $body.width("auto");

Inspired by: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

I was getting a "jumpy" screen for lack of a better term and the key here for me was following the width settings. Thanks a ton.
@Hcabnettek Yep: "jumpy" == "document reflow". Glad it helped you! :-)
is there a css solution for this? does it work in all browsers and mobile?
just a typo: It must be $body.css("overflow", "auto"); in the last step :)
Oh man, what an marvelous idea. @jpap you helped me resolve the document reflow issue that was bugging me for a long time.

charlietfl · Accepted Answer · 2012-03-02 19:05:22Z

21

You could try setting body size to window size with overflow: hidden when modal is open

answered Mar 2, 2012 at 19:05

charlietfl

172k14 gold badges125 silver badges154 bronze badges

7 Comments

xorinzor Over a year ago

doing so would move the screen every time the modal is opened, that is not convenient, I just need to disable the background scroll

charlietfl Over a year ago

not sure that you can scrollbars are browser related and you can't do much with them

charlietfl Over a year ago

you could set modal to "fixed" so won't move when scrolling

xorinzor Over a year ago

its not about stopping the modal from scrolling, its about stopping the body in the background from scrolling

charlietfl Over a year ago

it's the window that scrolls if body overflows it. For example the scrollbars are not part of document.

|

merv · Accepted Answer · 2013-11-16 20:00:48Z

Warning: The option below is not relevant to Bootstrap v3.0.x, as scrolling in those versions has been explicitly confined to the modal itself. If you disable wheel events you may inadvertently prevent some users from viewing the content in modals that have heights greater than the viewport height.

Yet Another Option: Wheel Events

The scroll event is not cancelable. However it is possible to cancel the mousewheel and wheel events. The big caveat is that not all legacy browsers support them, Mozilla only recently adding support for the latter in Gecko 17.0. I don't know the full spread, but IE6+ and Chrome do support them.

Here's how to leverage them:

$('#myModal') .on('shown', function () { $('body').on('wheel.modal mousewheel.modal', function () { return false; }); }) .on('hidden', function () { $('body').off('wheel.modal mousewheel.modal'); });

JSFiddle

Your JSFiddle doesn't work on Firefox 24, Chrome 24 nor on IE9.
@AxeEffect should be working now. The only issue was that the external references to the Bootstrap library had changed. Thanks for the heads up.
This doesn't prevent touch devices from scrolling, the overflow:hidden is better for now.
they are all working but not for mobile devices. -__- Tested Android 4.1 and Chrome
@TowerJimmy you probably need to cancel out the touch or drag events for that (if that's even possible)

CloudMagick · Accepted Answer · 2022-08-10 01:11:24Z

13

It's 2022, and there are better CSS solutions now. This works well. You can add this class to the body element, or modify the body style itself, when the modal is open.

 .body-no-scroll { height: 100vh; width: 100vw; touch-action: none; -webkit-overflow-scrolling: none; overflow: hidden; overscroll-behavior: none; }

answered Aug 10, 2022 at 1:11

CloudMagick

2,6262 gold badges25 silver badges21 bronze badges

3 Comments

Fred K Over a year ago

Issue on Safari mobile: when the modal itself has no scrolling, and you try to scroll inside it, the body below still will scrolls. Any solution to this?

Fred K Over a year ago

The above issue is reported here stackoverflow.com/questions/64514118/… and here: stackoverflow.com/questions/78763217/…

Carl Verret Feb 7 at 0:58

works with chrome

user1095118 · Accepted Answer · 2018-04-03 02:06:11Z

12

As of November 2017 Chrome Introduced a new css property

overscroll-behavior: contain;

which solves this problem although as of writing has limited cross browser support.

see below links for full details and browser support

answered Apr 3, 2018 at 2:06

user1095118

4,5264 gold badges28 silver badges22 bronze badges

4 Comments

Hybrid web dev Over a year ago

Even in 2020 caniuse puts support of this at only 78%. Hardly a viable solution.

Avatar Over a year ago

In 2022 it seems to get better: caniuse.com/?search=overscroll-behavior

Llama D'Attore Over a year ago

Works good on desktop. Caveats I've noticed (2022 Dec 7). Doesn't work on desktop. Doesn't work for non-scroll-able divs (think divs with overflow-y:auto which may or may not be scroll-able at any given point

cglacet Feb 6 at 15:14

This only works if there is an active scroll in the modal.

Samuel RIGAUD · Accepted Answer · 2024-07-04 02:15:05Z

11

Try this one:

.modal-open { overflow: hidden; position: fixed; width: 100%; height: 100%; }

It worked for me. (supports IE8)

edited Jul 4, 2024 at 2:15

Samuel RIGAUD

1,6981 gold badge19 silver badges28 bronze badges

answered Feb 15, 2015 at 11:48

fatCop

2,58410 gold badges38 silver badges59 bronze badges

1 Comment

AlexioVay Over a year ago

This works but also causes you to jump to the top when you open a modal when using position: fixed.

jparkerweb · Accepted Answer · 2013-05-22 22:38:12Z

/* ============================= * Disable / Enable Page Scroll * when Bootstrap Modals are * shown / hidden * ============================= */ function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function theMouseWheel(e) { preventDefault(e); } function disable_scroll() { if (window.addEventListener) { window.addEventListener('DOMMouseScroll', theMouseWheel, false); } window.onmousewheel = document.onmousewheel = theMouseWheel; } function enable_scroll() { if (window.removeEventListener) { window.removeEventListener('DOMMouseScroll', theMouseWheel, false); } window.onmousewheel = document.onmousewheel = null; } $(function () { // disable page scrolling when modal is shown $(".modal").on('show', function () { disable_scroll(); }); // enable page scrolling when modal is hidden $(".modal").on('hide', function () { enable_scroll(); }); });

tetsuo · Accepted Answer · 2013-10-29 20:01:27Z

Couldn't make it work on Chrome just by changing CSS, because I didn't want the page to scroll back to the top. This worked fine:

$("#myModal").on("show.bs.modal", function () { var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000); }).on("hide.bs.modal", function () { var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top); });

this is the only solution that worked for me on bootstrap 3.2.
Had the jump to top issue with angular-material sidenavs. This was the only answer that seems to work in all cases (desktop/mobile + allow scroll in the modal/sidenav + leave the body scroll position fixed without jumping).

Jassim Abdul Latheef · Accepted Answer · 2016-08-28 08:06:53Z

Adding the class 'is-modal-open' or modifying style of body tag with javascript is okay and it will work as supposed to. But the problem we gonna face is when the body becomes overflow:hidden, it will jump to the top, ( scrollTop will become 0 ). This will become a usability issue later.

As a solution for this problem, instead of changing body tag overflow:hidden change it on html tag

$('#myModal').on('shown.bs.modal', function () { $('html').css('overflow','hidden'); }).on('hidden.bs.modal', function() { $('html').css('overflow','auto'); });

This is absolutely the correct answer because the general consensus answer scrolls the page to the top which is a horrible user experience. You should write a blog on this. I ended up turning this into a global solution.

Aravind Siruvuru · Accepted Answer · 2021-02-05 09:14:15Z

React , if you are looking for

useEffect in the modal that is getting popedup

 useEffect(() => { document.body.style.overflowY = 'hidden'; return () =>{ document.body.style.overflowY = 'auto'; } }, [])

Murat Yıldız · Accepted Answer · 2023-02-07 20:24:35Z

For Bootstrap, you might try this (working on Firefox, Chrome and Microsoft Edge) :

body.modal-open { overflow: hidden; position:fixed; width: 100%; }

Gregg Od · Accepted Answer · 2024-06-30 06:14:08Z

The latest solution is to use css. We were graced with the overscroll-behavior property.

If you want to prevent scrolling from bleeding through to other divs you use:

overscroll-behavior: contain;

or if you are using tailwind, the class is overscroll-contain

You can see its support here (it has full browser support):
https://caniuse.com/css-overscroll-behavior

More on overscroll here:
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

This only work if there is a scroll in the modal (and it's active)

Anish Gupta · Accepted Answer · 2012-03-02 19:26:21Z

5

I'm not sure about this code, but it's worth a shot.

In jQuery:

$(document).ready(function() { $(/* Put in your "onModalDisplay" here */)./* whatever */(function() { $("#Modal").css("overflow", "hidden"); }); });

As I said before, I'm not 100% sure but try anyway.

answered Mar 2, 2012 at 19:26

Anish Gupta

2,2262 gold badges23 silver badges37 bronze badges

4 Comments

xorinzor Over a year ago

This doesn't prevents the body from scrolling while the modal is opened

Anish Gupta Over a year ago

@xorinzor you stated in the comments section of charlietfl's answer that this works. But you said: This doesn't prevents the body from scrolling while the modal is opened.

xorinzor Over a year ago

true but for now its the only solution that partly works and I'm fine with. the reason why I marked his response as answer is because he was earlier with the answer.

Anish Gupta Over a year ago

@xorinzor really, i thought i answered before him/her , might be some weird glitch. its fine though

AdamJB · Accepted Answer · 2015-07-03 10:39:37Z

I'm not 100% sure this will work with Bootstrap but worth a try - it worked with Remodal.js which can be found on github: http://vodkabears.github.io/remodal/ and it would make sense for the methods to be pretty similar.

To stop the page jumping to the top and also prevent the right shift of content add a class to the body when the modal is fired and set these CSS rules:

body.with-modal { position: static; height: auto; overflow-y: hidden; }

It's the position:static and the height:auto that combine to stop the jumping of content to the right. The overflow-y:hidden; stops the page from being scrollable behind the modal.

Stephen M. Harris · Accepted Answer · 2013-08-29 02:55:38Z

The best solution is the css-only body{overflow:hidden} solution used by most of these answers. Some answers provide a fix that also prevent the "jump" caused by the disappearing scrollbar; however, none were too elegant. So, I wrote these two functions, and they seem to work pretty well.

var $body = $(window.document.body); function bodyFreezeScroll() { var bodyWidth = $body.innerWidth(); $body.css('overflow', 'hidden'); $body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth)) } function bodyUnfreezeScroll() { var bodyWidth = $body.innerWidth(); $body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth())) $body.css('overflow', 'auto'); }

Check out this jsFiddle to see it in use.

This is not so old but none of this is working at all for me not even the fiddle I can still scroll the window, what am I missing ?
Open and Close the modal a few times, and the main green DIV shrinks and shrinks!
@Webinan I'm not seeing this in Chrome on Win7. What's your browser and viewport size?
@smhmic after about 20 times of open and close the green div's width becomes equal to the open modal buttons' width. Chrome on 8
Similar to @jpap's answer (stackoverflow.com/a/16451821/5516499) but with added bugs. :-(

Danie · Accepted Answer · 2017-09-18 08:57:55Z

Many suggest "overflow: hidden" on the body, which will not work (not in my case at least), since it will make the website scroll to the top.

This is the solution that works for me (both on mobile phones and computers), using jQuery:

 $('.yourModalDiv').bind('mouseenter touchstart', function(e) { var current = $(window).scrollTop(); $(window).scroll(function(event) { $(window).scrollTop(current); }); }); $('.yourModalDiv').bind('mouseleave touchend', function(e) { $(window).off('scroll'); });

This will make the scrolling of the modal to work, and prevent the website from scrolling at the same time.

Looks like this solution fixes this iOS bug too: hackernoon.com/…

freedude · Accepted Answer · 2021-04-20 11:07:01Z

I had to set the viewport-height to get this working perfectly

body.modal-open { height: 100vh; overflow: hidden; }

myriacl · Accepted Answer · 2012-03-03 00:08:33Z

You could use the following logic, I tested it and it works(even in IE)

 <html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> var currentScroll=0; function lockscroll(){ $(window).scrollTop(currentScroll); } $(function(){ $('#locker').click(function(){ currentScroll=$(window).scrollTop(); $(window).bind('scroll',lockscroll); }) $('#unlocker').click(function(){ currentScroll=$(window).scrollTop(); $(window).unbind('scroll'); }) }) </script> <div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <button id="locker">lock</button> <button id="unlocker">unlock</button> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div>

ling · Accepted Answer · 2016-03-01 06:44:25Z

Based on this fiddle: http://jsfiddle.net/dh834zgw/1/

the following snippet (using jquery) will disable the window scroll:

 var curScrollTop = $(window).scrollTop(); $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

And in your css:

html.noscroll{ position: fixed; width: 100%; top:0; left: 0; height: 100%; overflow-y: scroll !important; z-index: 10; }

Now when you remove the modal, don't forget to remove the noscroll class on the html tag:

$('html').toggleClass('noscroll');

Shouldn't the overflow be set to hidden? +1 though as this worked for me (using hidden).

Leigh · Accepted Answer · 2017-04-18 03:15:27Z

Sadly none of the answers above fixed my issues.

In my situation, the web page originally has a scroll bar. Whenever I click the modal, the scroll bar won't disappear and the header will move to right a bit.

Then I tried to add .modal-open{overflow:auto;} (which most people recommended). It indeed fixed the issues: the scroll bar appears after I open the modal. However, another side effect comes out which is that "background below the header will move to the left a bit, together with another long bar behind the modal"

Luckily, after I add {padding-right: 0 !important;}, everything is fixed perfectly. Both the header and body background didn't move and the modal still keeps the scrollbar.

Hope this can help those who are still stuck with this issue. Good luck!

Daniel Iftimie · Accepted Answer · 2021-12-03 16:26:56Z

This solution worked for me:

var scrollDistance = 0; $(document).on("show.bs.modal", ".modal", function () { scrollDistance = $(window).scrollTop(); $("body").css("top", scrollDistance * -1); }); $(document).on("hidden.bs.modal", ".modal", function () { $("body").css("top", ""); $(window).scrollTop(scrollDistance); });

.content-area { height: 750px; background: grey; text-align: center; padding: 25px; font-weight:700; font-size: 30px; } body.modal-open { position: fixed; left: 0; width: 100%; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <div class="content-area"> Scroll Down To Modal Button<br/> <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/> </svg> </div> <center class="my-3"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> </center> <div class="content-area"></div> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

Basically when the modal is opened it will add a negative top for the body to maintain the window scroll position before opening the modal. When closing the modal the window scroll is kept using the same value applied for the top when opening. This approach prevents body scroll.

Here is a working fiddle

David Dal Busco · Accepted Answer · 2024-07-09 10:08:19Z

Late to the party, but assuming that the modal is set with an accessible role such as dialog, then the scroll of the body can be prevented when such an element is present in the DOM using the CSS selector :has, which is now well supported across browsers.

body:has([role="dialog"]) { overflow: hidden; }

That seems to work! I guess that needs a bit of testing to ensure no "normal" components have the dialog role.

Gerhard Liebenberg · Accepted Answer · 2013-04-23 19:28:48Z

This worked for me:

$("#mymodal").mouseenter(function(){ $("body").css("overflow", "hidden"); }).mouseleave(function(){ $("body").css("overflow", "visible"); });

evoskuil · Accepted Answer · 2013-10-18 11:33:57Z

Most of the pieces are here, but I don't see any answer that puts it all together.

The problem is threefold.

(1) prevent the scroll of the underlying page

$('body').css('overflow', 'hidden')

(2) and remove the scroll bar

var handler = function (e) { e.preventDefault() } $('.modal').bind('mousewheel touchmove', handler)

(3) clean up when the modal is dismissed

$('.modal').unbind('mousewheel touchmove', handler) $('body').css('overflow', '')

If the modal is not full-screen then apply the .modal bindings to a full screen overlay.

pierrea · Accepted Answer · 2014-02-26 19:33:20Z

My solution for Bootstrap 3:

.modal { overflow-y: hidden; } body.modal-open { margin-right: 0; }

because for me the only overflow: hidden on the body.modal-open class did not prevent the page from shifting to the left due to the original margin-right: 15px.

Cliff · Accepted Answer · 2015-04-22 20:09:50Z

I just done it this way ...

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

But when the scroller dissapeared it moved everything right 20px, so i added

$('body').css('margin-right', '20px');

straight after it.

Works for me.

This only works if the modal is smaller than the screen size.

Mats · Accepted Answer · 2016-02-07 23:24:06Z

If modal are 100% height/width "mouseenter/leave" will work to easily enable/disable scrolling. This really worked out for me:

var currentScroll=0; function lockscroll(){ $(window).scrollTop(currentScroll); } $("#myModal").mouseenter(function(){ currentScroll=$(window).scrollTop(); $(window).bind('scroll',lockscroll); }).mouseleave(function(){ currentScroll=$(window).scrollTop(); $(window).unbind('scroll',lockscroll); });

Collectives™ on Stack Overflow

Prevent BODY from scrolling when a modal is opened

58 Answers 58

21 Comments

6 Comments

Comments

Opening the modal:

Closing the modal:

5 Comments

7 Comments

Yet Another Option: Wheel Events

JSFiddle

5 Comments

3 Comments

4 Comments

1 Comment

Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

4 Comments

Comments

5 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

3 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

58 Answers 58

21 Comments

6 Comments

Comments

Opening the modal:

Closing the modal:

5 Comments

7 Comments

Yet Another Option: Wheel Events

5 Comments

3 Comments

4 Comments

1 Comment

Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

4 Comments

Comments

5 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

3 Comments

Comments

1 Comment

Comments

Linked

Related