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.
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.
modal-open class will be back to prevent scrolling in Bootstrap 3.0! See my update. –
Cenac $('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! –
Overcautious modal-open will return in Bootstrap 3, so when that launches it should be safe to remove the above code. –
Cenac 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. –
Cenac 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. –
Bombe noScroll{overflow:hidden;} on the body and body has position:relative that is never changed to fixed. –
Dubitation modal-open class to the body. It keeps the scroll position of body. –
Cenac html { overflow-y: scroll; } on my page body and when modal is open the scrollbar gets twice. Any idea? –
Malloch $(window).scrollTop(0); –
Invaginate 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;
}
position: fixed on the body. –
Crowther js const currPageScrollPos = $(window).scrollTop() $("body").removeClass("show_overlay") $(window).delay(5).scrollTop(currPageScrollPos) –
Jeuz 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');
})
You need to go beyond @charlietfl's answer and account for scrollbars, otherwise you may see a document reflow.
body widthbody overflow to hiddenExplicitly 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);
body overflow to autoSet 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
$body.css("overflow", "auto"); in the last step :) –
Vertebral You could try setting body size to window size with overflow: hidden when modal is open
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.
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');
});
overflow:hidden is better for now. –
Hewlett Try this one:
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
height: 100%;
}
it worked for me. (supports IE8)
position: fixed. –
Rubella 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
overflow-y:auto which may or may not be scroll-able at any given point –
Kimberlykimberlyn /* =============================
* 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(); });
});
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);
});
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');
});
For Bootstrap, you might try this (working on
Firefox,ChromeandMicrosoft Edge) :
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}
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;
}
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';
}
}, [])
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.
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.
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.
open modal buttons' width. Chrome on 8 –
Hewlett 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.
I had to set the viewport-height to get this working perfectly
body.modal-open {
height: 100vh;
overflow: hidden;
}
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>
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');
overflow be set to hidden? +1 though as this worked for me (using hidden). –
Moffit 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!
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">×</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
This worked for me:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});
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.
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.
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.
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);
});
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);
}
});
})
});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;
});
}
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');
});
seems, this does not work well on chrome. any suggestion to fix it ?
This works
body.modal-open {
overflow: hidden !important;
}
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';
}
};
For those wondering how to get the scroll event for the bootstrap 3 modal:
$(".modal").scroll(function() {
console.log("scrolling!);
});
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');
}
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" : "";
};
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%}
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');
}
});
You should add overflow: hidden in HTML for a better cross-platform performance.
I would use
html.no-scroll {
overflow: hidden;
}
$('.modal').on('shown.bs.modal', function (e) {
$('body').css('overflow-y', 'hidden');
});
$('.modal').on('hidden.bs.modal', function (e) {
$('body').css('overflow-y', '');
});
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";
worked for me
$('#myModal').on({'mousewheel': function(e)
{
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
});
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);
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%;
}
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';
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]);
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>
</>
);
}
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";
}
CSS Hack
use CSS :has()
If this class is available in the DOM, overflow will get hidden for Body
body:has(.show_popup) {
overflow: hidden !important;
}
I realize that many similar answers have been given, but after struggling with this I wanted to add mine in case it helps anyone.
I did not like how the basic overflow-hidden removes the scrollbar and makes everything jump. So I used the method which extends the body with margin to fill that space and thereby avoid the jarring experience.
I think this works for me because I'm using a dialog element with a darkened overlay and some background blur. It makes the margin, where the scrollbar used to be, hardly noticeable.
// variable to simply avoid unnecessary selector calls
const bodyEl = document.querySelector('body');
// in the function that opens your dialog
let scrollBarWidth = window.innerWidth - bodyEl.clientWidth;
bodyEl.style.overflow = 'hidden';
bodyEl.style.marginRight = videoDialogScrollBarWidth +'px';
// when you close your dialog
bodyEl.style.overflow = '';
bodyEl.style.marginRight = '';
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
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();
}
};
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.
$("body").on("show.bs.modal", ".modal", function() { $("body").addClass("modal-open"); }); –
Deltadeltaic 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).
© 2022 - 2024 — McMap. All rights reserved.