CODEWITHSUNDEEP
javascripthtmlcssmodal-dialog
Hirohito Yamada
Hirohito Yamada

Reputation: 387

disable scroll on body when modal view is opened

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.

Upvotes: 9

Views: 55987

Answers (5)

Michael Norward
Michael Norward

Reputation: 91

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

Upvotes: 8

lofihelsinki
lofihelsinki

Reputation: 2571

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

Upvotes: 3

lifeiscontent
lifeiscontent

Reputation: 593

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

Upvotes: 3

ifadey
ifadey

Reputation: 1062

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

Upvotes: 4

IvanJ
IvanJ

Reputation: 645

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

Upvotes: 14

Related Questions