All geek questions in one place

Disable body scrolling when opening a modal view

I create this site, and when you click the link at the far right end of the second title bar, a modal window appears with YouTube videos embedded.

When I look through the modal, BODY also scrolls, and I would like to stop it. How can i do this?

Help would be greatly appreciated! Thank you for your time.

+6
source share
5 answers

In CSS, add the following rule:

body.modal-open { overflow: hidden; }

Also, use some jQuery so that when you open a modality, you add the .modal-open tag to the <body> , and when it's closed, you delete it.

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

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

 .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; }
+2
source

I would set the html and body overflow: hidden; tags overflow: hidden; so that the user cannot scroll.

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

+2
source

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

This will hide the scroll bar for Chrome and FF

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

However, this will disable the scrollbar; scrolling is still possible by pressing keys / text selection / touch gestures.

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

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

In other corrections that I have seen so far, when they tried to apply fixed positioning in the "BODY" tag when opening a modal file, the document scrolls in the very top corner, because by default it should have it located at the top 0. I tried this and found out that the best solution is to use the overflow hidden in the html tag rather than the body tag. Thus, we do not need fixed positioning, and you will remain so that the document remains where it was before the modal was opened.

In the fix 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 what a fix. You can continue to create the CSS class and simply switch the class to HTML when you open or close the modal window. But that certainly fixed the problem for me.

0
source

Source: https://habr.com/ru/post/986065/

More articles:


All Articles