Answer by LowFieldTheory for Prevent BODY from scrolling when a modal is opened
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 =...
View ArticleAnswer by nrkz for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by user1095118 for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by Danie for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by George Siggouroglou for Prevent BODY from scrolling when a modal is...
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...
View ArticleClik here to view.
Answer by Bocard Wang for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by namal for Prevent BODY from scrolling when a modal is opened
worked for me $('#myModal').on({'mousewheel': function(e) { if (e.target.id == 'el') return; e.preventDefault(); e.stopPropagation(); } });
View ArticleAnswer by Lozhachevskaya Anastasiya for Prevent BODY from scrolling when a...
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...
View ArticleAnswer by Kristian for Prevent BODY from scrolling when a modal is opened
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 =...
View ArticleAnswer by Murat Yıldız for Prevent BODY from scrolling when a modal is opened
For Bootstrap, you might try this (working on Firefox, Chrome and Microsoft Edge) : body.modal-open { overflow: hidden; position:fixed; width: 100%; } Hope this helps...
View ArticleAnswer by Jassim Abdul Latheef for Prevent BODY from scrolling when a modal...
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...
View ArticleAnswer by ling for Prevent BODY from scrolling when a modal is opened
Based on this fiddle: http://jsfiddle.net/dh834zgw/1/ the following snippet (using jquery) will disable the window scroll: var curScrollTop = $(window).scrollTop();...
View ArticleAnswer by Mats for Prevent BODY from scrolling when a modal is opened
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(){...
View ArticleAnswer by Fernando Siqueira for Prevent BODY from scrolling when a modal is...
$('.modal').on('shown.bs.modal', function (e) { $('body').css('overflow-y', 'hidden'); }); $('.modal').on('hidden.bs.modal', function (e) { $('body').css('overflow-y', ''); });
View ArticleAnswer by Afonso for Prevent BODY from scrolling when a modal is opened
You should add overflow: hidden in HTML for a better cross-platform performance. I would use html.no-scroll { overflow: hidden; }
View ArticleAnswer by AdamJB for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by Hopeful Man for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by Cliff for Prevent BODY from scrolling when a modal is opened
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....
View ArticleAnswer by fatCop for Prevent BODY from scrolling when a modal is opened
Try this one: .modal-open { overflow: hidden; position:fixed; width: 100%; height: 100%; } it worked for me. (supports IE8)
View ArticleAnswer by Jarosław Osmólski for Prevent BODY from scrolling when a modal is...
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...
View ArticleAnswer by asked_io for Prevent BODY from scrolling when a modal is opened
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....
View ArticleAnswer by Omer M. for Prevent BODY from scrolling when a modal is opened
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 =...
View ArticleAnswer by ibrahimyilmaz for Prevent BODY from scrolling when a modal is opened
This is the best solution for me: Css: .modal { overflow-y: auto !important; } And Js: modalShown = function () { $('body').css('overflow', 'hidden'); }, modalHidden = function () {...
View ArticleAnswer by Brad for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by Arie for Prevent BODY from scrolling when a modal is opened
For those wondering how to get the scroll event for the bootstrap 3 modal: $(".modal").scroll(function() { console.log("scrolling!); });
View ArticleAnswer by pierrea for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by tetsuo for Prevent BODY from scrolling when a modal is opened
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 =...
View ArticleAnswer by evoskuil for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by Stephen M. Harris for Prevent BODY from scrolling when a modal is...
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,...
View ArticleAnswer by jpap for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by merv for Prevent BODY from scrolling when a modal is opened
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...
View ArticlePrevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by Pars for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by Alpha for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by kjdion84 for Prevent BODY from scrolling when a modal is opened
Here's my vanilla JS solution based on @jpap jquery:let bodyElement = document.getElementsByTagName('body')[0];// lock body scroll let width = bodyElement.scrollWidth;...
View ArticleAnswer by Leo for Prevent BODY from scrolling when a modal is opened
This worksbody.modal-open { overflow: hidden !important;}
View ArticleAnswer by Aravind Siruvuru for Prevent BODY from scrolling when a modal is...
React , if you are looking foruseEffect in the modal that is getting popedup useEffect(() => { document.body.style.overflowY = 'hidden'; return () =>{ document.body.style.overflowY = 'auto'; } },...
View ArticleAnswer by freedude for Prevent BODY from scrolling when a modal is opened
I had to set the viewport-height to get this working perfectlybody.modal-open { height: 100vh; overflow: hidden;}
View ArticleAnswer by Alexandre Desroches for Prevent BODY from scrolling when a modal is...
I read most answers with a focus on React.Best solution for my React functional component was to use solution provided originally by @arcticmattI included some improvements that were mentioned in other...
View ArticleAnswer by arcticmatt for Prevent BODY from scrolling when a modal is opened
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 =...
View ArticleAnswer by Daniel Iftimie for Prevent BODY from scrolling when a modal is opened
This solution worked for me:var scrollDistance = 0;$(document).on("show.bs.modal", ".modal", function () { scrollDistance = $(window).scrollTop(); $("body").css("top", scrollDistance *...
View ArticleAnswer by kashif Naeem for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by CloudMagick for Prevent BODY from scrolling when a modal is opened
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;...
View ArticleAnswer by S3n for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by BennKingy for Prevent BODY from scrolling when a modal is opened
I found this to be the best solution: export const removeBodyScrollingWhenModalOpen = (modalOpen: boolean) => { console.log('modalOpen: ', modalOpen); const body = document.body; if (modalOpen...
View ArticleAnswer by S.Saderi for Prevent BODY from scrolling when a modal is opened
CSS Hackuse CSS:has()If this class is available in the DOM, overflow will get hidden for Bodybody:has(.show_popup) { overflow: hidden !important;}MDN :...
View ArticleAnswer by Ivan Town for Prevent BODY from scrolling when a modal is opened
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...
View ArticleAnswer by Gregg Od for Prevent BODY from scrolling when a modal is opened
The latest solution is to use css. We were graced with the overscroll-behavior property.If you want to prevent scrolling from bleeding through to other divs you use:overscroll-behavior: contain;or if...
View ArticleAnswer by NzoP for Prevent BODY from scrolling when a modal is opened
In my case the scrolling element was the html element and not body(you can check with document.scrollingElement as it can depend of the browser). If it is your case as well you can do as follow (which...
View ArticleAnswer by David Dal Busco for Prevent BODY from scrolling when a modal is opened
Late to the party, but assuming that the modal is set with an accessible role such as dialog, then the scroll of the body can be prevented when such an element is present in the DOM using the CSS...
View Article