How to Stop background scroll on IOS? - javascript

Hello, I'm currently stuck on an issue that only happens on IOS. I have a dropdown menu that only shows on mobile & tablet mode. When the burger icon is clicked, it fixes the html & body, this works on all devices, except IOS, I tested this on an iPhone 5C.
Below I have listed the code that I have used stop the background scrolling. Once the burger icon is clicked it toggles the class noScroll. The class noScroll consists of overflow:hidden; which is then applied to the html & body.
I have absolutely no idea why this is not working with IOS, maybe because of the bounce scrolling? I am unsure.
The website that I am working on is Redec
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
.noScroll {
overflow: hidden;
/* position: fixed */
}

sorry for posting this as a solution but I don't have enough reputation to comment yet, I think you can find the solution here => Does overflow:hidden applied to <body> work on iPhone Safari?

Related

Disable scrolling when pop up open and menu not showing on mobile

thanks for looking into my issue
I am creating a website: http://testgod0312.000webhostapp.com/ , all the css are separate by blocks so that it is easier for you to potentially help me (in assets folder).
when you go to map and click on a button, a pop up shows up, but you can keep on scrolling. The button is only coded in css (no js), everything in the map.css file - any idea how to disable overflow without resorting to js? if using js, what would you do as there is no function capturing the opening / closing of the box?
I have a menu (click top right corner), works fine on laptop but on mobile, it shows only 50% of it. The code is in nav.css; with the responsive at the bottom. Any idea on how to display it all?
thanks in advance!!
fafa
#1 can't be solved without javascript as long as browsers are not supporting css:has(). So the only way is to apply a class or a style="overflow: none;" to the body as soon as a popup gets opened and remove it after it was closed. The very same happens already if the menu is opened/closed.
A very small code snippet would be enough:
window.addEventListener("hashchange",
() => document.body.classList.toggle("popup-open", location.hash.startsWith('#popup'))
);
and CSS
body.popup-open {
overflow: none;
}
About #2 inside the nav.css the values applied before the media query (#media all and (max-width: 767px) {) cause the issue.
The menu__right changes from flex to none on small screens. And menu__left still has the right 50% value applied for bigger screens, So adjusting this value inside the media query to 0% solves it.
.menu__left {
right: 0%;
width: 100%;
}

Hide scrollbars in Quasar/Vue - overflow hidden not working

I am using Quasar/VueJS for development. How can I remove the outermost scrollbar (this is for the actual body of the page).
So annoyed that I have already tried putting overflow:hidden everywhere but it is still there.
Since I have a scrollbar for my sidebar, I just dont want another scrollbar to be beside it, as it can be confusing for the user. As you can see, I am working on adding another scrollbar just beside the actual body of the page.
How can I get rid of the outermost scrollbar?
Codepen:
https://codepen.io/kzaiwo/pen/bGVrweM?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer
Working with Quasar, checkout the docs, more specific this class: no-scrollbar. apply this on the element of concern.
Adding the following to your main styling will make the scroll bar go away without losing the scroll functionality:
::-webkit-scrollbar {
display: none;
}
Be aware that this will not work for firefox and IE. More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
.scroll {
overflow: hidden;}
Add this class to your css
<q-layout container>
Remove container from q-layout.
<q-layout>
https://quasar.dev/layout/layout#qlayout-api
You can hide the scrollbar without loosing the scroll behavior with css...
/* Hide scrollbar */
::-webkit-scrollbar {
display: none;
}
This works on chrome for sure, probably on Safari aswell, not sure (probably not) if IE and Firefox.

Enable scrolling of content in slide in panel on iPhone

http://www.daneliandesigns.co.uk/BKS/
The form does not scroll down on iPhone (you have to click the [+] button to activate slide in panel). I have FullPage.js enabled and this is working well. The content in the second section is scrollable on mobile but when the slide in panel is activated you can no longer scroll down on iPhone.
I have tried the following CSS but to no avail:
#media (max-width: 480px) {
.form-live, .nks-content, .fp-enabled body {
overflow:visible!important;
overflow:scroll;
-webkit-overflow-scrolling:touch;
z-index:9999999999999999999999!important;
}
}
I have also tried adding to normalScrollElements:
function(isResponsive){
normalScrollElements: '#S2', '.nks-content';
}
I am not sure this second solution would work considering the slide in panel is not part of the FullPage.js
I just want to be able to scroll the slide in content down to the SUBMIT button on mobile - namely - iPhone
I have had this issue before and It was because there was no height set. Try setting height to 100% and see if that works

Responsive CSS /java script DIV - show on click only on mobile query

I have looked all over online trying to solve this problem. I am in the process of making a desktop website responsive for mobile and have run into issues with the Navigation menu. I have set it to display:none for the mobile version but I want to make it so it can be seen by clicking on either an image or text. The solution that I have found elsewhere have all only worked with a div menu that only has UL and LI elements in it. Mine has H2 tags for each "section", etc. I just would rather have a button click and bam the whole DIV shows up just on a mobile query without messing with any of my HTML code, etc.
I have found this jquery code that seems close, however it seems to hide the nav div on desktop. I need it to work with display:none only set in the media query via CSS.
$("#preview").toggle(function() {
$("#navi").hide();
}, function() {
$("#navi").show();
});
});
It gets called by just clicking on the text such as "Click here for menu"...Would also prefer that to be a button or a link.
Try $.toggleClass() instead of using $.hide(). This way the media query css will have more control. The following is an example that a button that hides a div only in screen smaller than 700px.
JS:
$("#preview").toggleClass('hideInMobile');
Css:
#media (max-width: 700px){
.hideInMobile
{
display:none
}
}
demo:http://jsfiddle.net/HZDCW/2/
Hope it helps.

Detect the presence of the ie10 metro address bar with javascript

I have a site that has some call to action buttons in a div that is fixed to the bottom of the screen.
We are currently using a div that is positioned absolutely as follows
<div id="buttonBar">footer code</div>
<style>#buttonBar{ bottom: 0; width: 100%; position: fixed; }</style>
This has worked well in all the browsers except for IE10 in metro (modern) mode.
When a link is clicked the address bar shows and covers the button bar, it then disappears
Other than redesigning the layout of the page, I would like the button bar to sit just above the address bar when it is shown.
Does anyone know a way of detecting whether the address bar is visible using javaScript?
You could try to move the footer above the location-bar, until the location-bar collapses, then drop the footer back down. Here's a potential solution:
1.
Move your footer up 50px (or whatever) if the user is likely on an IE10 touch-enabled browser
if (!!window.navigator.msPointerEnabled) { // sniff for IE10 + touch
$("#buttonBar").css("transform", "translateY(-50px)");
}
2.
Listen for the first interaction with the browser, then collapse the footer with the location-bar.
$("body").on("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown", function () {
$("body").off("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown");
$("#buttonBar").css("transform","translateY(0)");
});
This solution hasn't been 100% reliable, there are clearly some interactions that collapse the location-bar but don't trigger an event. I'm working on a better solution and will update once found, but figured I'd share this to get the ball rolling.

Categories