disable scroll on body when modal view is opened

Question

I am creating this website and when you click at link at the far right-end of the second row of the header, modal window shows up with youtube videos embedded.

When I scroll through the modal, BODY will also scroll and I would like to stop that. How could I do that?

Help will be much appreciated! Thank you for your time.

You can add this css `$("body").css("overflow-y", "hidden")` — Mahedi Sabuj, Apr 27 '15 at 13:42
Hi, thanks for the quick response. My friend made this javascript for me so I am not quite sure where to add it in my js file. Could you kindly guide me through? — Hirohito Yamada, Apr 27 '15 at 13:55
@Hirohito_Yamada, when you click on the link, add this jquery on your click function like `$("#yourElemrntIdName").click(function(){$("body").css("overflow-y", "hidden");});` — Mahedi Sabuj, Apr 27 '15 at 14:50
Possible duplicate of [Prevent body scrolling but allow overlay scrolling](https://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling) — Dawid Zbiński, Aug 23 '18 at 10:01

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

14

In your CSS add the following rule:

body.modal-open { overflow: hidden; }

Also, use some jQuery so that when modal is open you add .modal-open class to <body> tag, and when it is closed you remove it.

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

answered Apr 27 '15 at 13:39

IvanJ

645
5
19

Hi, thanks for the quick response. My friend made this javascript for me so I am not quite sure where to add it in my js file. Could you kindly guide me through? – Hirohito Yamada Apr 27 '15 at 13:55
You could just add ` – IvanJ Apr 27 '15 at 13:58
Thanks! just added that in to my html but its not working... Am I supposed to change "#myModal" to something different? – Hirohito Yamada Apr 27 '15 at 14:06
Yes, you should change it to id or class of the `
` element that represents your modal.
– IvanJ Apr 27 '15 at 14:10
my main.js is not using "show" and "hidden". How do I specify the trigger in this case? – Hirohito Yamada Apr 27 '15 at 22:42
I tried and it is working correctly now. But the scrolling wont stop. My friend told me that it is because of fsvs.js or jquery-scrollInTurn.js that I am using... – Hirohito Yamada Apr 27 '15 at 23:07
2

@IvanJ you shouldn't just copy paste answers which are already there. http://stackoverflow.com/a/11013994/5437621 – mrid Jan 25 '17 at 10:57

score 8 · Answer 2 · answered Nov 11 '17 at 07:04

In the other fixes that I've seen so far, where they were trying to apply fixed positioning on the "BODY" tag when modal gets opened, the document is scrolled at the very top, since the default is to have it positioned at top 0. I tried this and found out that the best solution is to apply overflow hidden on the html tag and not on the body tag. This way we won't need any fixed positioning and you will get to keep the document staying on where it was at before modal was opened.

In the fix that I found you just need to apply something like

function openModal(){
   $("html").css({"overflow-y":"hidden"})
   // open your modal box function in this area...
}

and that's the fix. You may go ahead and create a CSS class and just toggle the class on HTML when opening or closing the modal box. But this has surely fixed the problem for me

Goddamn. This is the first thing that solved it for me. I've been messing with scrolltop and all sorts of nonsense. Thank you! — dgo, Jan 19 '21 at 19:23

score 4 · Answer 3 · answered Apr 27 '15 at 13:46

You can prevent scrolling of any DOM element by setting its overflow CSS property to hidden and position fixed. For example:

.disable-scroll {
    /* disable scrollbar on both x and y axis */
    overflow: hidden;

    /* disable scrollbar on x-axis only */
    overflow-x: hidden;

    /* disable scrollbar on y-axis only */
    overflow-y: hidden;

    /* disable scroll */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* OPTIONAL: none of dom element will be click-able */
    pointer-events: none;
}

Hi, thanks for the quick response. My friend made this javascript for me so I am not quite sure where to add it in my js file. Could you kindly guide me through? — Hirohito Yamada, Apr 27 '15 at 13:55

score 3 · Answer 4 · answered Apr 27 '15 at 15:51

I would set the html and body tags to overflow: hidden; this way the user can't scroll.

however, if the contents of your modal are very large I would recommend having a scrollable container for the modal. You can see an example of what I'm talking about here: http://fortitude.io/javascript.html#js-modal

score 3 · Answer 5 · answered Nov 16 '16 at 11:05

Simple overflow: hidden; doesn't cut it for Chrome or Firefox. Using position: fixed; works, but as a side-effect can make the screen jump when closing the modal.

This will hide the scrollbar for both Chrome And FF

.modal-open {
  -moz-appearance: menuimage;
}

.modal-open::-webkit-scrollbar {
   width: 0 !important;
}

However, this will only disable the scrollbar, scrolling is still possible with keypresses / text selection / touch gestures.

One possibility is to set the height of elements inside body to zero, for example all divs

.modal-open div {
  height: 0px;
}

disable scroll on body when modal view is opened

5 Answers5