I have a full-screen menu and once active the page still scrolls, is there a way to stop this?
I read another post that stated to
body,html {
overflow: hidden;
max-height: 100%;
}
but this stops the page from scrolling as well.
You may want to consider some JS/Jquery to enable / disable a fixed class when the menu toggles open and closed?
for example
if($('#menu').hasClass('open'))
{
$('body').addClass("fixedPosition");
}
else
{
$('body').removeClass("fixedPosition");
}
Related
Hello, the website that I am currently working on is Redec, and I am having an issue with the background scrolling when the menu is open on IOS. Please inspect the website as I am currently unable to supply the RAW html.
To replicate the issue, open the website (Redec) and click the menu item in the top right, and scroll down. You will notice that the background (body I think) also scrolls, and when you close the menu you are at the bottom of the page. I've looked everywhere and am unable to fix this problem.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
CSS
.noScroll {
overflow: hidden;
/* position: fixed */
}
As soon as you open my website, you are greeted with a T&C's and GDPR modal box see here. However, the background still scrolls when this is open, I have tried code to stop the scrolling, but that prevents scrolling across the whole website. Any help is greatly appreciated.
OUR WEBSITE
html,body.modal-open {
overflow: hidden;
}
.allowScroll {
overflow: scroll !important;
}
jQuery(function($) {
$(".termsagree").on("click", function() {
$("html, body.model-open").addClass("allowScroll");
});
});
EDIT Once you click agree the pop up won't show again unless you reload the website in another incognito page!
I couldn't find the css selector "modal-open" on your website but maybe something like this would work?
Replace your example code with this.
jQuery:
jQuery(document).ready(function ($) {
if($('#tlight').length){
$('body').css('overflow', 'hidden');
}
});
From the looks of it, once you click the agree button the page reloads and removes the '#tlight' element from the DOM. So what this will do is check if it exists on page load, and if it does set body overflow to hidden. You may need to add "important" to it depending on your current CSS.
On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body
I have a bootstrap modal and on showing that, the background should not be allowed to scroll. I could use overflow: hidden for the item list container. But it causes the page scroll to top and it should not be allowed. Any idea?
Have you tried with:
html { overflow-y: hidden; }
Hope this helps!
Note that this will disable the scroll bar.
I'm creating a web application that should work also on iPad. Now with iOS 5 even the scrolling works OK. But my problem is that if I have a modal window, the scrolling behind the modal mask is enabled, even if other events are disabled. Does anybody know how I can switch off the scrolling behind the modal mask?
Example:
The grid that has scrolling enabled:
.z-grid{
overflow: scroll;
-webkit-overflow-scrolling: touch;
z-index: 1;
}
The modal mask:
.z-modal-mask {
background:#E0E1E3 none repeat scroll 0 0;
height:100%;
left:0;
opacity:0.6;
position:absolute;
top:0;
width:100%;
z-index:30000;
}
The element z-grid needs to have position active to enable z-index. Try either position: relative; or position: absolute;. I can't say exactly which one as I can't see your markup :)
.z-grid{
overflow: scroll;
-webkit-overflow-scrolling: touch;
z-index: 1;
position: relative; /*or absolute*/
}
I have looked through a lot of answers regarding disabling scrolling of body on iPads behind the modal, and none have been found to be suitable particularly when having a scrollable div on the modal, I found a combination of this javascript logic from another SO user plus then unattaching the event handler on popup close did the trick.
On popup/dialog open:
//uses document because document will be topmost level in bubbling
$(document).on('touchmove', function (e) {
e.preventDefault();
});
//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart', '.scrollable', function (e) {
if (e.currentTarget.scrollTop === 0) {
e.currentTarget.scrollTop = 1;
} else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
e.currentTarget.scrollTop -= 1;
}
});
//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove', '.scrollable', function (e) {
e.stopPropagation();
});
On popup/dialog close:
$(document).off('touchmove');
$('body').off('touchstart', '.scrollable');
$('body').off('touchmove', '.scrollable');
The mentions of scrollable above just let elements you do require scrolling be exempt from the logic if the element has that css class set.
In my case, I had a scrollable div inside my popup, causing all sorts of issues, so to disable background scrolling but still allow to scroll within the dialog scrollable div, make sure you add a scrollable class to your scrollable div so it is ignored.