Hidden overflow and sticky elements - html

I want to prevent horizontal overflow for the body of the page and allow sticky elements at the same time. The solution seems simple at a first glance:
html {
overflow-x: hidden;
}
Everything works as expected on desktop. If you test it on mobile devices or choose a mobile device in Chrome dev tools, this will fail to work though. Apparantly, because touch devices ignore overflow-x: hidden for html and body tags as it's pointed out in many answers here on SO. So we have to use this instead:
html, body {
overflow: hidden;
}
However, this breaks sticky positioning. I know specifying the body height explicitely should fix the issue:
html, body {
height: 100%;
overflow: hidden;
}
body {
min-height: 100%;
}
Voila, everything seems to work well on mobile and desktop devices. However, this breaks window.onscroll event because it's the body that is scrolling now. So most of the scroll dependant libraries will fail to work (e.g. AOS). I kind of gave up at this point. Anybody has a solution to this? I'd love to avoid JavaScript solutions if possible.

Related

My Website's Scrollable Divs Work Everywhere Except Mobile Safari

I'm working on a website, http://strange.business which is designed to load 5 random stories in 5 scrollable viewing divs. Note: There are only 2 stories right now.
There didn't appear to be any problem with that aspect of the page design, the divs would scroll without issue in Chrome, IE, Edge, etc. But I tried it on my gf's iPad Mini yesterday and the divs are locked for some reason. The stories do load, but they won't scroll.
The basic setup for those divs is thus:
#display1 {
background-color: white;
height: 350px;
overflow: auto;
}
#display1Inner {
width: 100%;
height: 100%;
overflow: visible;
}
<div name="display1" id="display1" title="Display1">
<span id="display1JavaWarning">You may need to enable
Javascript</span>
<object type="text/html" id="display1Inner"></object>
</div>
When the page loads, it executes a javascript function that picks a random preview htm file, and then populates the display1Inner object with that data. I'm aware that my coding could often be tighter, but it does generally work. Except on mobile Safari apparently.
I've tried a bunch of CSS variations after researching similar problems, but nothing seems to do the trick. That "overflow: visible;" bit was one of my latest attempts, but it wasn't present when I first noticed the problem. I don't know anybody with an iPhone (oddly enough) so I'm not sure if later versions of Safari still bug out on this, but the iPad I tested this on isn't that old. I should be able to make this work. Any thoughts?
PS. The page is still is a work in progress, sorry if you have a hard time navigating it.
ETA: Alright so I converted the page to use iframes inside nested divs, and now it works across platforms. So that much is solved. Yay!
Now though, I'm fiddling around trying to get rid of the double-scrollbars that appear when the page is viewed in desktop browsers. As I understand this workaround, IOS Safari totally disregards iframe height settings and displays them at full length. Hence the need for the iframe-wrapper div to keep that in check. And hence the extra scrollbar when I look at it in a "normal" browser window. If I disable scrolling on the iframe-wrapper div then it eliminates the double scrollbar, but also breaks scrolling in Safari.
You can view the most current incarnation at http://strange.business/test.htm. I'm open to suggestions.
ETA: Success! After setting the iframe heights to 99% and taking out the borders, they look just about like they did before, with no extra scrollbars. And scrolling works across platorms now. One less problem in the my life. Thanks for the help!
Have you tried the following CSS for your div:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I came across that solution in this codepen:
https://codepen.io/kristiegiles/pen/WveNaX?editors=110
It is set up to scroll an iframe, but I tried it with some plain html in place of the iframe and it worked on my iPhone.
The html is basically a div wrapped around your content:
<h1>scrolling on iOS</h1>
<div class="content">
<div class="iframe-wrapper">
// Your content here
</div>
</div>
With -webkit-overflow-scrolling: touch; and overflow-y: scroll; added to the class applied to the div:
html,body{
height:100%;
}
.content{
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.iframe-wrapper{
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
Hope that helps.

overflow-x doesn't work on Safari after rotation

I am building a site where I need a certain div to be horizontal scrollable when overflown if the content is bigger than the screen. Okay, so this is easy - and it works on all browser but it doesnt work perfectly on Safari:
Scenario: Load page in potrait on iPad or iPhone. Content in the scrollable div is bigger than the screen. The scroll works fine. Now I rotate the screen to landscape and the content is now smaller than the screen and therefore there is no scrollbar. I rotate back to potrait, the scrollbar appears, but the scroll doesn't work. If I then refresh the page the scroll works again.
Duplication of the issue:
The scenario can be duplicated with this fiddle: http://jsfiddle.net/v7wvbupd/2/. If you go to this fiddle with an Android product it works perfectly with each rotation. If you do the same with an Apple product you will encounter the bug.
The scroll - with rotations - works fine on all other mobile browsers than Safari.
I have been trying out several things from other posts and other sites but with no success.
What I tried and didn't work:
Setting the postion of body to relativ.
Adding the following: html, body {overflow-x: hidden;}.
Use: -webkit-overflow-scrolling:touch; on the scrollable div.
Adding !important to -webkit-overflow-scrolling:touch; and overflow-x: auto to keep it from being overritten when rotatet.
I have also been looking into some js fixes like adding a timeout on the attribute but still with no results:
<script>
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
</script>
Most of the posts that I have come across are issues where the scroll doesn't work at all. In my situation it works until I rotate from landscape to potrait.
My structure (simplified):
<html>
<body>
<div id="header" class="col-md-12"></div>
<div class="scrollableDiv">
<div id="footer" class="col-md-12"></div>
</body>
</html>
My current CSS:
html {
overflow-y: scroll;
height: 100%;
width:100%;
}
body {
padding-top: 10px;
padding-bottom: 20px;
height: 100%;
width: 100%;
}
.scrollableDiv {
overflow-x: auto !important;
width: 800px;
overflow-y: hidden;
padding-bottom: 55px;
-webkit-overflow-scrolling: touch !important;
}
.col-md-12{
width: 100%;
}
EDIT
My site is using Angularjs as a part of the solution. I just tested if wrapping it within some js was the problem but this had nothing to do with it either. It seems to be a common problem with the Safari only?
I had this troubles with Safari by the past.
So simple things like overflow could become complicated ones.
I suggest you use iScroll.
Definetely the right solution for such a case.
http://cubiq.org/iscroll-5

Disable Elastic Scrolling in iOS Safari

I am trying to disable the elastic scrolling/bounce that is caused when pulling down from the top of an iOS Safari Page or vice versa at the bottom.
I have tried a technique below which I have seen people have said works but hasn't worked so far for me:
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
#ios-scroll-wrapper {
overflow: auto OR scroll;
}
}
Is this something that is not able to be disabled now on iOS Safari? It's quite annoying to have as I have a fixed header/navigation at the top of the screen and pulling the page down causing the elastic scroll to either pull all content down apart from the header or with the above fix it will pull the content down and the header will disappear.
EDIT: Just as an FYI, this page/site is not using PhoneGap and a lot of solutions I have looked at so far use PhoneGap.
Try this:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
As stated at Css-tricks

Overflow-x:hidden; on mobile device not working

I hope you guys can help me cause I cant seem to wrap my head arroud this. I build a one-page site which works fine, except for one thing, which is the overflow-x:hidden on the tablet viewport (and probably smartphone too, havent tested that yet)
Despite the body having body {overflow-x:hidden;} which works fine within normal browsers on the pc, i am able to move to the side for about 25 pixels or so, cause thats the overflow of my rotated div, that sticks out of the screen, which i wanted to hide.
Is there a way to fix this? I supplied below part of the head and html / css
The viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The CSS applied to the media queries and they respective elements that overflow
#media only screen and (max-width: 992px){
#skills, #experience {overflow-x:hidden;}
}
#media (max-width: 479px){
body {overflow-x:hidden;}
}
And the regular CSS applied to the html / body tags
body, html {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}
The id's #skills and #experience have a class called .hoek which is defined as followed and causes the overflow.
.hoek {margin: 0 -50px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
-ms-transform-origin:left center;
margin-top: -175px;
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
z-index: 20;
}
I must point out, I think, that the #skills and #experience are sections and not divs. I am not sure if that might be a problem within the code, but I thought not. If there is anymore information that is needed, please let me know, but I thought I had covered the bases here.
I dont know where to begin with a fiddle, so I supply you just the test link of the site: http://www.jellyfishwebdesign.nl/Joost/index.php
Found the answer actually here on Stack overflow:
The browsers on mobile devices ignore the overflow-x:hidden within the body and html tag if <meta name="viewport"> tag is present, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hidden in it, solving the problem.
Documentation:
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers.
The bad thing is that it prevents the use now of a jquery plugin, that scrolls....
Try setting minimum-scale=1 instead of maximum-scale=1.
minimum-scale controls how far out the user can zoom, while maximum-scale controls how far in they can zoom. To prevent viewing of the overflow you need to limit the user's ability to zoom out, not in.
I had this same problem and tried applying body with overflow-x: hidden;, and lots of other answers, but what did work in my Wordpress, was applying a global CSS rule as below.
body, html {
overflow-x: hidden;
}
This eliminates the movement left to right on mobiles.
The HTML part is needed, not just body!
As pointed out by Dorvalla, body and html tags are ignored by smartphones browsers, although not by "big screen" browsers, I solved the issue by using the first child of the page structure, so no need of an aditional wrapper.
e.g. for my WordPress case:
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}
Try setting minimum-scale=1 instead of maximum-scale=1 or initial-scale=1.
eg.
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
if you applied overflow-x:hidden to the body, you might wanna apply to html too.
body,html {
overflow-x:hidden;
}
My analysis as of September 2021. Tested on Safari and Firefox 37 (iOS 15).
The accepted answer and its SO link are pretty old (2013-2014) and do not seem valid any more.
Also, I find that adding a "wrapping" div on my body is not really elegant and could lead to unexpected behaviour.
The page on which I am working on is pretty simple, there is just one background image that might overflow on the right of the screen for smaller screens.
Applying minimum-scale=1 to the viewport meta tag did not work. This prevents zooming out, but I could still have this ugly scroll on the right.
Applying overflow-x: hidden; on <html> only did not work.
Applying overflow-x: hidden; on <body> only did not work.
Applying overflow-x: hidden; on both <html> & <body> did work.
This can be resolved without needing to include minimum-scale=1. While that property does prevent the user from zooming and scrolling out, it doesn't resolve the issue of the horizontal scrollbar still appearing, regardless of the fact that the user can't use it.
The way I resolved this issue was by having the following viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
Next, you need to make sure that your html and body elements have the following properties...
html {
...
overflow-x: hidden;
}
body {
...
position: relative;
overflow-x: hidden;
}
These properties should make it so that any type of horizontal overflow doesn't show, nor will the horizontal scrollbar be present. This also allows you to lock page-scroll in case of a modal or some other reason on both mobile and desktop by simply passing overflow: hidden to the html element.
If you are using tailwind css in next js and you are using a function to display or hide the sidemenu then it will works for you.
const toggleCart = () => {
if (ref.current.classList.contains("hidden")) {
ref.current.classList.remove("hidden");
ref.current.classList.add("translate-x-0");
} else if (!ref.current.classList.contains("hidden")) {
ref.current.classList.add("hidden");
}
};
Set the sidebar or your div initially hidden and will works fine in your phone. Don't use translate-x-full. It will cause the overflow in mobile device in my case
I found that applying:
overflow-x: hidden
to the div wrapper inside the body made the scrolling a little jumpy on iOS Safari so therefore just gave it overflow: hidden and left the body as visible. This worked perfect for me in all browsers and devices I needed.
Even though you are creating a parent container to apply the overflow: hidden; , the overflow property will not work on position: absolute;. Because position absolute moves the targeted element out of context with the document structure.
It has to be position: relative;
Had the same kind of problem with a toggle menu for mobile users, put it off screen so it would appear when the user clicked on the menu bar, solved applying overflow-x:hidden to my section tag.

Overflow-x:hidden not working in Chrome

I've applied this property to the elements: body and html and still Chrome will let me scroll on the x-axis.
I've tested it in Safari and Firefox and the x-axis scrolling is disabled...
Anyone know what I'm missing?
N.B. Using overflow: hidden works but I'd like people to be able to scroll on the y-axis.
Thanks!
You can use
html { overflow-x: hidden; }​
I just encountered this issue when trying to hide some images that I /knew/ would be wider than the body on mobile.
Originally I simply had:
body { overflow-x: hidden; }
This didn't work in Chrome, but it did in IE 10.
However, if you then also added:
html { overflow-x: hidden; }
The images were correctly hidden in both browsers.
It appears the problem no longer exists thanks to #Nelson pointing this out.
You can see the code working correctly here: http://jsfiddle.net/H84pr