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.

score 536 · Accepted Answer · edited May 18 '23 at 17:44

536

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.

edited May 18 '23 at 17:44

Clint Warner

1,265
1
9
25

answered Jun 13 '12 at 11:33

MartinHN

19,542
19
89
131

3

this does not work anymore in bootstrap 2.2.2. Hopefully .modal-open will come back in the future... https://github.com/twitter/bootstrap/issues/5719 – ppetrid Dec 19 '12 at 22:30
3

@ppetrid I don't expect it to return. Based on this writing: https://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."_ – MartinHN Dec 20 '12 at 10:25
@MartinHN yeah i know, today the bootstrap team closed the github issue as 'wontfix'. – ppetrid Dec 20 '12 at 20:07
And the `modal-open` class will be back to prevent scrolling in Bootstrap 3.0! See my update. – MartinHN Mar 11 '13 at 14:48
@anand at the time the current answer was the best answer, after an x amount of time Icannot change the answer anymore. – xorinzor Apr 20 '13 at 20:54
Worked for me. Just used `$('body').addClass('modal-open')` before `$('#modal').modal('show')` and `$('body').removeClass('modal-open')` before `$('#modal').modal('hide')`. I have put the CSS code too. Thanks a lot! – Bagata May 15 '13 at 03:10
3

@Bagata Cool - the `modal-open` will return in Bootstrap 3, so when that launches it should be safe to remove the above code. – MartinHN May 15 '13 at 09:35
3

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. – Mohd Abdul Mujib Jan 23 '14 at 10:31
Hi @wardha-Web It is only under the accepted answer, as far as I see it. The ranking must be by answer, then by votes. But yes, accepted answers are not always the best :) – MartinHN Jan 23 '14 at 12:29
anyway to stop the page from shifting to the right when a modal is open? – waspinator Apr 15 '14 at 14:38
@waspinator You can use the `modal-open` class on the `body` tag again, and set `padding-right: 17px;` - but this is not safe. It shifts the width of the scrollbar which will vary for browser/OS. Also, if the page does not have scroll bars before opening the modal, the padding should not be added. – MartinHN Apr 15 '14 at 21:48
1

@waspinator - I just solved the shifting issue (which is IMO very annoying) with the following CSS code: `body { padding-top: 70px; overflow-y: scroll; }` `body.modal-open { overflow-y: scroll; }` `.modal { overflow: auto; }` ... With this the vertical scrolls will be always visible on body, and the modal scroll will be visible only when needed. – Fer García Apr 21 '14 at 18:09
1

Chrome for Android just didn't like this solution! I had to go with position fixed, as [Brad outlined below](http://stackoverflow.com/a/24727206/945370). YMMV, of course :) – Brendan Aug 22 '14 at 14:53
For some reason pinterest modal dialog is not scrolled. And they use `noScroll{overflow:hidden;}` on the body and body has `position:relative` that is never changed to fixed. – Yaroslav Yakovlev Nov 06 '14 at 16:40
6

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 – patrick Sep 17 '15 at 22:07
@patrick With 3.0 and newer, it all works as it should out of the box. No need to manually add the `modal-open` class to the body. It keeps the scroll position of body. – MartinHN Sep 18 '15 at 08:34
@MartinHN, no, it doesn't... that's why I was looking here for a solution. Might be a combination with something else, but the standard modal caused the original page to scroll to the top once a modal was opened – patrick Oct 03 '15 at 14:01
@MartinHN Unfortunately not worked for me with Bootstrap 3. On the other hand normally I use `html { overflow-y: scroll; }` on my page body and when modal is open the scrollbar gets twice. Any idea? – Jack Dec 29 '15 at 17:01
It prevents from scrolling, but cannot stop the scroll events firing. Checked in Mac OS X Chrome version 49. – Chemical Programmer Mar 26 '16 at 15:01
Although the background is keep scrolling to the bottom, I make it scroll to the top after closing the modal by using JQuery. ```$(window).scrollTop(0);``` – Dale Nguyen Jan 15 '18 at 22:11

score 142 · Answer 2 · edited May 18 '23 at 15:34

142

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.

edited May 18 '23 at 15:34

Clint Warner

1,265
1
9
25

answered Jul 13 '14 at 21:39

Brad

15,361
6
36
57

9

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. – Raul Rene Aug 19 '14 at 13:59
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. – Elijah Lofgren Feb 04 '16 at 17:04
10

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: http://pastebin.com/Vpsz07zd. – Tool Aug 25 '16 at 09:15
Though I feel this would only fit very basic needs, it was a useful fix. Thanks. – Steve Benner May 10 '19 at 08:24
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) ``` – Aerodynamic Aug 29 '21 at 10:19

score 39 · Answer 3 · answered Nov 14 '12 at 23:01

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');
})

score 25 · Answer 4 · edited May 31 '18 at 00:08

25

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

edited May 31 '18 at 00:08

Kirk Beard

9,569
12
43
47

answered May 08 '13 at 23:20

jpap

924
11
12

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 Sep 05 '13 at 17:09
3

@Hcabnettek Yep: "jumpy" == "document reflow". Glad it helped you! :-) – jpap Sep 06 '13 at 07:36
is there a css solution for this? does it work in all browsers and mobile? – Ruben Aug 20 '14 at 09:45
just a typo: It must be `$body.css("overflow", "auto");` in the last step :) – schneikai May 31 '15 at 12:05
Oh man, what an marvelous idea. @jpap you helped me resolve the document reflow issue that was bugging me for a long time. – Goran Radulovic Jan 20 '16 at 22:39

score 21 · Answer 5 · answered Mar 02 '12 at 19:05

21

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

answered Mar 02 '12 at 19:05

charlietfl

170,828
13
121
150

13

doing so would move the screen every time the modal is opened, that is not convenient, I just need to disable the background scroll – xorinzor Mar 02 '12 at 19:12
not sure that you can scrollbars are browser related and you can't do much with them – charlietfl Mar 02 '12 at 19:14
you could set modal to "fixed" so won't move when scrolling – charlietfl Mar 02 '12 at 19:16
9

its not about stopping the modal from scrolling, its about stopping the body in the background from scrolling – xorinzor Mar 02 '12 at 20:22
1

it's the window that scrolls if body overflows it. For example the scrollbars are not part of document. – charlietfl Mar 02 '12 at 20:33
your initial answer, I just didn't realize it at the time – xorinzor Mar 03 '12 at 15:14
Great solution; you just need to account for scrollbars to avoid a document reflow and content "jump". See my answer. – jpap May 08 '13 at 23:21

merv · Answer 6 · 2013-11-16T20:00:48.893

18

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

edited Nov 16 '13 at 20:00

answered Nov 29 '12 at 03:25

merv

67,214
13
180
245

Your JSFiddle doesn't work on Firefox 24, Chrome 24 nor on IE9. – AxeEffect Sep 30 '13 at 15:07
@AxeEffect should be working now. The only issue was that the external references to the Bootstrap library had changed. Thanks for the heads up. – merv Sep 30 '13 at 21:52
3

This doesn't prevent touch devices from scrolling, the `overflow:hidden` is better for now. – Positivity Jul 03 '14 at 20:41
5

they are all working but not for mobile devices. -__- Tested Android 4.1 and Chrome – Tower Jimmy Jun 02 '15 at 13:49
@TowerJimmy you probably need to cancel out the touch or drag events for that (if that's even possible) – xorinzor Jan 26 '17 at 15:32

fatCop · Answer 7 · 2015-05-14T04:37:52.227

11

Try this one:

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

it worked for me. (supports IE8)

edited May 14 '15 at 04:37

answered Feb 15 '15 at 11:48

fatCop

2,556
10
35
57

9

This works but also causes you to jump to the top when you open a modal when using `position: fixed`. – AlexioVay Dec 17 '16 at 13:37

score 10 · Answer 8 · answered Apr 03 '18 at 02:06

10

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 03 '18 at 02:06

user1095118

4,338
3
26
22

Even in 2020 caniuse puts support of this at only 78%. Hardly a viable solution. – Hybrid web dev Nov 18 '20 at 04:28
2

In 2022 it seems to get better: https://caniuse.com/?search=overscroll-behavior – Avatar Jun 24 '22 at 09:31
1

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 – Llama D'Attore Dec 08 '22 at 02:18

score 9 · Answer 9 · answered May 22 '13 at 22:38

/* =============================
 * 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(); });
});

score 9 · Answer 10 · answered Oct 29 '13 at 20:01

9

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);
});

answered Oct 29 '13 at 20:01

tetsuo

10,726
3
32
35

1

this is the only solution that worked for me on bootstrap 3.2. – volx757 Feb 09 '16 at 20:06
1

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). – cYrixmorten Sep 19 '17 at 08:52
This is also only solution that actually worked for me. tx – Deedz Dec 12 '18 at 13:11

score 9 · Answer 11 · answered Aug 28 '16 at 08:06

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. — Smith, Jan 12 '17 at 19:58

Murat Yıldız · Answer 12 · 2023-02-07T20:24:35.330

8

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

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

edited Feb 07 '23 at 20:24

answered Sep 22 '16 at 18:52

Murat Yıldız

11,299
6
63
63

score 6 · Answer 13 · answered Feb 05 '21 at 09:14

6

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';
    }
  }, [])

answered Feb 05 '21 at 09:14

Aravind Siruvuru

1,019
12
7

score 5 · Answer 14 · answered Jul 03 '15 at 10:39

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.

score 5 · Answer 15 · answered Mar 02 '12 at 19:26

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 02 '12 at 19:26

Anish Gupta

2,218
2
23
37

3

This doesn't prevents the body from scrolling while the modal is opened – xorinzor Mar 02 '12 at 20:20
@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. – Anish Gupta Mar 24 '12 at 15:13
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. – xorinzor Apr 04 '12 at 08:52
@xorinzor really, i thought i answered before him/her , might be some weird glitch. its fine though – Anish Gupta Apr 04 '12 at 11:00

score 4 · Answer 16 · answered Aug 10 '22 at 01:11

4

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 '22 at 01:11

CloudMagick

2,428
2
23
20

This answer definitely needs more upvotes. Can confirm it works well. – Miloš Ranđelović Nov 24 '22 at 09:26

score 3 · Answer 17 · answered Aug 29 '13 at 02:55

3

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.

answered Aug 29 '13 at 02:55

Stephen M. Harris

7,163
3
38
44

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 ? – landed Mar 14 '14 at 11:14
Open and Close the modal a few times, and the main green DIV shrinks and shrinks! – Positivity Jul 03 '14 at 20:32
@Webinan I'm not seeing this in Chrome on Win7. What's your browser and viewport size? – Stephen M. Harris Aug 03 '14 at 23:56
1

@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 – Positivity Aug 05 '14 at 23:12
Similar to @jpap's answer (http://stackoverflow.com/a/16451821/5516499) but with added bugs. :-( – Kivi Shapiro May 12 '17 at 16:08

score 3 · Answer 18 · answered Sep 18 '17 at 08:57

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: https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8 — Gotenks, Mar 15 '18 at 16:13

score 3 · Answer 19 · answered Apr 20 '21 at 11:07

3

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

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

answered Apr 20 '21 at 11:07

freedude

73
1
6

score 2 · Answer 20 · answered Mar 01 '16 at 06:44

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`). — mhulse, Jun 07 '16 at 17:00

score 2 · Answer 21 · edited Apr 18 '17 at 03:15

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!

score 2 · Answer 22 · answered Dec 03 '21 at 16:26

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

score 2 · Answer 23 · answered Mar 03 '12 at 00:08

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>

score 1 · Answer 24 · answered Apr 23 '13 at 19:28

1

This worked for me:

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

answered Apr 23 '13 at 19:28

Gerhard Liebenberg

396
2
11

Of all the above answers, this is the first and only one that worked for me. – Carl Du Plessis Dec 28 '20 at 04:00

evoskuil · Answer 25 · 2013-10-18T11:33:57.487

1

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.

edited Oct 18 '13 at 11:33

answered Oct 18 '13 at 11:07

evoskuil

1,011
1
7
13

4

This also prevents scrolling within the modal. – Daniel Dec 11 '16 at 13:30
Same problem. Did you find a solution? @Daniel – AlexioVay Dec 17 '16 at 13:49
@Vay Sort of. Check this out: http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/ – Daniel Dec 18 '16 at 15:32

score 1 · Answer 26 · answered Feb 26 '14 at 19:33

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.

score 1 · Answer 27 · answered Apr 22 '15 at 20:09

1

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.

answered Apr 22 '15 at 20:09

Cliff

75
1
8

This only works if the modal is smaller than the screen size. – Sergey Oct 21 '15 at 19:50

score 1 · Answer 28 · answered Feb 07 '16 at 23:24

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); 
});

score 1 · Answer 29 · answered Dec 21 '16 at 13:05

I had a sidebar that was generated by checkbox hack. But the main idea is to save the document scrollTop and not to change it during scrolling the window.

I just didn't like the page jumping when body becomes 'overflow: hidden'.

window.addEventListener('load', function() {
    let prevScrollTop = 0;
    let isSidebarVisible = false;

    document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
        
        prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        isSidebarVisible = event.target.checked;

        window.addEventListener('scroll', (event) => {
            if (isSidebarVisible) {
                window.scrollTo(0, prevScrollTop);
            }
        });
    })

});

score 1 · Answer 30 · answered Jun 10 '19 at 19:50

Since for me this problem presented mainly on iOS, I provide the code to fix that only on iOS:

  if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
    var $modalRep    = $('#modal-id'),
        startScrollY = null, 
        moveDiv;  

    $modalRep.on('touchmove', function(ev) {
      ev.preventDefault();
      moveDiv = startScrollY - ev.touches[0].clientY;
      startScrollY = ev.touches[0].clientY;
      var el = $(ev.target).parents('#div-that-scrolls');
      // #div-that-scrolls is a child of #modal-id
      el.scrollTop(el.scrollTop() + moveDiv);
    });

    $modalRep.on('touchstart', function(ev) {
      startScrollY = ev.touches[0].clientY;
    });
  }

score 1 · Answer 31 · edited Jun 20 '20 at 09:12

None of the above answers worked perfectly for me. So I found another way which works well.

Just add a scroll.(namespace) listener and set scrollTop of the document to the latest of it's value...

and also remove the listener in your close script.

// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
  
  var documentScrollTop = $(document).scrollTop();
  $(document).on('scroll.noScroll', function() {
     $(document).scrollTop(documentScrollTop);
     return false;
  });

}).on('hidden.bs.modal', function() {

  $(document).off('scroll.noScroll');

});

update

seems, this does not work well on chrome. any suggestion to fix it ?

This is a better variation of what I came up with. But alas, I had the problems with Chrome as well. It is is still problematic due to strange and unpredictable side effects — dgo, Jan 19 '21 at 19:09

score 1 · Answer 32 · answered Nov 15 '20 at 10:23

1

This works

body.modal-open {
   overflow: hidden !important;
}

answered Nov 15 '20 at 10:23

Leo

398
6
11

score 1 · Answer 33 · answered Jan 31 '23 at 16:41

I found this to be the best solution:

   export const removeBodyScrollingWhenModalOpen = (modalOpen: boolean) => {
        console.log('modalOpen: ', modalOpen);
        const body = document.body;
        if (modalOpen && isMobile()) {
            const scrollY = document.documentElement.style.getPropertyValue('--scroll-y');
            body.style.position = 'fixed';
            body.style.top = `-${scrollY}`;
        } else if (!modalOpen && isMobile()) {
            const scrollY = body.style.top;
            body.style.position = '';
            body.style.top = '';
            window.scrollTo(0, parseInt(scrollY || '0') * -1);
        } else if (modalOpen) {
            document.body.style.overflowY = 'hidden';
        } else {
            document.body.style.overflowY = 'visible';
        }
    };

I added this to an useEffect in my modal component, I don't know if is the best approach, but it's working. — Aroldo Goulart, Feb 02 '23 at 02:59
@AroldoGoulart I spent like a whole day @ work coming up with different solutions. This seems to work best. Thanks for the upvote! — BennKingy, Feb 02 '23 at 13:55

score 0 · Answer 34 · answered Jun 05 '14 at 15:25

0

For those wondering how to get the scroll event for the bootstrap 3 modal:

$(".modal").scroll(function() {
    console.log("scrolling!);
});

answered Jun 05 '14 at 15:25

Arie

640
8
16

score 0 · Answer 35 · answered Sep 26 '14 at 14:51

0

This is the best solution for me:

Css:

.modal {
     overflow-y: auto !important;
}

And Js:

modalShown = function () {
    $('body').css('overflow', 'hidden');
},

modalHidden = function () {
    $('body').css('overflow', 'auto');
}

answered Sep 26 '14 at 14:51

ibrahimyilmaz

2,317
1
24
28

score 0 · Answer 36 · answered Oct 23 '14 at 17:17

I am using this vanilla js function to add "modal-open" class to the body. (Based on smhmic's answer)

function freezeScroll(show, new_width)
{
    var innerWidth = window.innerWidth,
        clientWidth = document.documentElement.clientWidth,
        new_margin = ((show) ? (new_width + innerWidth - clientWidth) : new_width) + "px";

    document.body.style.marginRight = new_margin;
    document.body.className = (show) ? "modal-open" : "";
};

score 0 · Answer 37 · answered Nov 15 '14 at 22:24

0

Hiding the overflow and fixing the position does the trick however with my fluid design it would fix it past the browsers width, so a width:100% fixed that.

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

answered Nov 15 '14 at 22:24

Will Bowman

407
9
20

score 0 · Answer 38 · answered Dec 18 '14 at 12:36

Try this code:

$('.entry_details').dialog({
    width:800,
    height:500,
    draggable: true,
    title: entry.short_description,
    closeText: "Zamknij",
    open: function(){
        //    blokowanie scrolla dla body
        var body_scroll = $(window).scrollTop();
        $(window).on('scroll', function(){
            $(document).scrollTop(body_scroll);
        });
    },
    close: function(){
        $(window).off('scroll');
    }
});

score 0 · Answer 39 · answered Aug 07 '15 at 13:51

0

You should add overflow: hidden in HTML for a better cross-platform performance.

I would use

html.no-scroll {
    overflow: hidden;
}

answered Aug 07 '15 at 13:51

Afonso

101
1
3

score 0 · Answer 40 · edited Jul 23 '16 at 10:37

0

   $('.modal').on('shown.bs.modal', function (e) {
      $('body').css('overflow-y', 'hidden');
   });
   $('.modal').on('hidden.bs.modal', function (e) {
      $('body').css('overflow-y', '');
   });

edited Jul 23 '16 at 10:37

chrki

6,143
6
35
55

answered Aug 21 '15 at 13:46

Fernando Albuquerque

542
1
7
12

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge. – Brian Tompsett - 汤莱恩 Jul 23 '16 at 13:24

score 0 · Answer 41 · edited Sep 26 '16 at 07:21

0

A small note for those in SharePoint 2013. The body already has overflow: hidden. What you are looking for is to set overflow: hidden on div element with id s4-workspace, e.g.

var body = document.getElementById('s4-workspace');
body.className = body.className+" modal-open";

edited Sep 26 '16 at 07:21

ekad

14,436
26
44
46

answered Sep 26 '16 at 06:59

Kristian

41
3

score 0 · Answer 42 · answered Apr 11 '17 at 09:21

0

worked for me

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

answered Apr 11 '17 at 09:21

namal

1,164
1
10
15

score 0 · Answer 43 · answered Aug 26 '17 at 14:44

The above occurs when you use a modal inside another modal. When I open a modal inside another modal, the closing of the latter removes the class modal-open from the body. The fix of the issue depends on how you close the latter modal.

If you close the modal with html like,

<button type="button" class="btn" data-dismiss="modal">Close</button>

Then you have to add a listener like this,

$(modalSelector).on("hidden.bs.modal", function (event) {
    event.stopPropagation();
    $("body").addClass("modal-open");
    return false;
});

If you close the modal using javascript like,

$(modalSelector).modal("hide");

Then you have to run the command some time after like this,

setInterval(function(){$("body").addClass("modal-open");}, 300);

b00sted 'snail' · Answer 44 · 2018-10-19T07:06:53.250

0

Why not to do that as Bulma does? When modal is-active then add to html their class .is-clipped which is overflow: hidden!important; And thats it.

Edit: Okey, Bulma has this bug, so you must add also other things like

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}

edited Oct 19 '18 at 07:06

answered Oct 19 '18 at 06:13

b00sted 'snail'

354
1
13
27

score 0 · Answer 45 · answered Jan 24 '21 at 03:16

Here's my vanilla JS solution based on @jpap jquery:

let bodyElement = document.getElementsByTagName('body')[0];

// lock body scroll
    let width = bodyElement.scrollWidth;
    bodyElement.classList.add('overflow-hidden');
    bodyElement.style.width = width + 'px';

// unlock body scroll
    bodyElement.classList.remove('overflow-hidden');
    bodyElement.style.width = 'auto';

score 0 · Answer 46 · answered Aug 31 '21 at 21:50

Here's what I do in React to fix this issue:

useEffect(() => {
  if (isShown) {
    const width = document.body.clientWidth;
    document.body.style.overflow = "hidden";
    document.body.style.width = `${width}px`;
  } else {
    document.body.style.overflow = "visible";
    document.body.style.width = `auto`;
  }

  return () => {
    document.body.style.overflow = "visible";
    document.body.style.width = `auto`;
  };
}, [isShown]);

Alexandre Desroches · Answer 47 · 2021-09-08T20:06:33.697

I read most answers with a focus on React.

Best solution for my React functional component was to use solution provided originally by @arcticmatt

I included some improvements that were mentioned in other answers in the code example bellow (pay attention to the useEffect definition):

import {useEffect, useRef} from "react";

export default function PopoverMenu({className, handleClose, children}) {
  const selfRef = useRef(undefined);

  useEffect(() => {
    const isPopoverOpenned = selfRef.current?.style.display !== "none";
    const focusedElement = document?.activeElement;
    const scrollPosition = {x: window.scrollX, y: window.scrollY};
    if (isPopoverOpenned) {
      preventDocBodyScrolling();
    } else {
      restoreDocBodyScrolling();
    }

    function preventDocBodyScrolling() {
      const width = document.body.clientWidth;
      const hasVerticalScrollBar = (window.innerWidth > document.documentElement.clientWidth);
      document.body.style.overflowX = "hidden";
      document.body.style.overflowY = hasVerticalScrollBar ? "scroll" : "";
      document.body.style.width = `${width}px`;
      document.body.style.position = "fixed";

    }

    function restoreDocBodyScrolling() {
      document.body.style.overflowX = "";
      document.body.style.overflowY = "";
      document.body.style.width = "";
      document.body.style.position = "";
      focusedElement?.focus();
      window.scrollTo(scrollPosition.x, scrollPosition.y);
    }


    return () => {
      restoreDocBodyScrolling(); // cleanup on unmount
    };
  }, []);

  return (
    <>
      <div
        className="backdrop"
        onClick={() => handleClose && handleClose()}
      />
      <div
        className={`pop-over-menu${className ? (` ${className}`) : ""}`}
        ref={selfRef}
      >
        <button
          className="pop-over-menu--close-button" type="button"
          onClick={() => handleClose && handleClose()}
        >
          X
        </button>
        {children}
      </div>
    </>
  );
}

score 0 · Answer 48 · answered Aug 23 '22 at 10:26

The most famous answer is simple i.e.

body{
   height: 100%;
   overflow-y: hidden;
}

but what will be the solution if you want to open a modal in a child/grand-child and stop the scroll? Well the longer solution will be to use props or store in Angular/React and change the height and overflow property of body tag.

Another solution can just be by getting the body from the child/grand-child component and change its height and overflow accordingly to stop scrolling. In my case I just did this

if(isModalExpanded){
    document.body.style.overflow = "hidden";
    document.body.style.height = "100%";
}
else{
    document.body.style.overflow = "auto";
    document.body.style.height = "auto";
}

score -1 · Answer 49 · edited Jun 20 '15 at 12:51

-1

This issue is fixed, Solution: Just open your bootstap.css and change as below

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  margin-right: 15px;
}

to

 body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  /*margin-right: 15px;*/
}

Please view the below youtube video only less than 3min your issue will fix... https://www.youtube.com/watch?v=kX7wPNMob_E

edited Jun 20 '15 at 12:51

Richard

2,840
3
25
37

answered Jun 20 '15 at 12:29

Hopeful Man

1
1

Any one try with this...? – Hopeful Man Jun 20 '15 at 16:08
I think you misunderstood the whole question. It's not about positioning the scrollbar, it's about preventing to be able to scroll in the background with your mousewheel on pc or finger on mobile devices. – AlexioVay Dec 17 '16 at 13:36

score -1 · Answer 50 · answered Dec 30 '22 at 11:39

This is a solution in TypeScript that allows easy extension of events to be prevented and deals with mobile devices as well. This also will not cause a horizontal jump when disabling the vertical scrollbar. Just use the exported functions at the bottom on e.g. a onclick handler on any HTML element. If not running in a NodeJS environment, simply delete the process.client checks.

/**
 * Handles scroll events for modal content
 */

const events = [
  'DOMMouseScroll',
  'mousewheel',
  'wheel',
  'touchmove',
  'keydown',
  'mousedown',
  'scroll',
];

const preventDefault = (e: Event) => {
  e.preventDefault();
  e.stopPropagation();
  return false;
};

let currentY: number;

const disableScroll = () => {
  currentY = window.scrollY;

  events.forEach((event) => {
    window.addEventListener(event, preventDefault, {
      passive: false,
    });
  });

  const bodyStyle = document.body.style;
  bodyStyle.setProperty('touch-action', 'none');
  bodyStyle.setProperty('position', 'fixed');
  bodyStyle.setProperty('overflow-y', 'scroll');
  bodyStyle.setProperty('width', '100%');
  bodyStyle.setProperty('top', `-${currentY}px`);
};

const enableScroll = () => {
  events.forEach((event) => {
    window.removeEventListener(event, preventDefault);
  });

  const bodyStyle = document.body.style;
  bodyStyle.removeProperty('touch-action');
  bodyStyle.removeProperty('position');
  bodyStyle.removeProperty('overflow-y');
  bodyStyle.removeProperty('width');
  bodyStyle.removeProperty('top');
  window.scroll(0, currentY);
};

/**
 * Makes a component (e.g. popup) modal
 */
export const makeModal = () => {
  if (process.client) {
    disableScroll();
  }
};

/**
 * Makes a component (e.g. popup) non-modal
 */
export const makeNonModal = () => {
  if (process.client) {
    enableScroll();
  }
};

score -3 · Answer 51 · answered Nov 19 '19 at 14:14

I found a working solution after doing some 8-10 hours research on StackOverflow itself.

The breakthrough

$('.modal').is(':visible');

So I have built a function to check if any modal is open which will periodically add class *modal-open** to the

 setInterval(function()
     {
         if($('.modal').is(':visible')===true)
         {
             $("body").addClass("modal-open");
         }
         else
         {
             $("body").removeClass("modal-open");
         }

     },200);

The reason to use $(".modal") here is because all modals (in Bootstrap) use class modal (fade/show is as per the state)

So my modals are now running perfectly without the body getting scrolled.

This is a bug/unheard issue in GitHub as well but nobody's bothered.

I'm sure this works, and it's probably even performant if it's the only thing on the page, but as your app grows adding more intervals like this will add up to the slow death of your app's performance. — Morgan Delaney, Nov 22 '19 at 04:07
Rather than polling every 200ms, it would be better to assign an event handler on modal open. E.g. something like `$("body").on("show.bs.modal", ".modal", function() { $("body").addClass("modal-open"); });` — Conman_123, Dec 08 '21 at 23:33

score -6 · Answer 52 · answered Aug 25 '13 at 12:51

HTML:

<body onscroll="stop_scroll()">

javascript:

function stop_scroll(){
    scroll(0,0) ;
}

If you set a flag (bool) inside stop_scroll(), you can decide when to engage it (if you want it only temporarely).

This will reset scrolling every time some element overflows the body boundaries and the windows tends to scroll (this is totally independent of scrollbars; overflow : hidden has nothing to do with it).

Prevent BODY from scrolling when a modal is opened

52 Answers52

Opening the modal:

Closing the modal:

Yet Another Option: Wheel Events

JSFiddle

update

Linked

Related