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
Related
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.
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.
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
I have an issue with text inputs on mobile (responsive) site.
I am using next line on css:
body { -webkit-overflow-scrolling: touch ; overflow-y: scroll; }
It's work good, except on inputs. when I fill the form with some text inputs - I can't see the values when I text it, it shows only after scrolling the page or moving to next field (tested on Safari).
i tried to fix it by adding:
input[type="text"] {
-webkit-overflow-scrolling: none !important;
}
But - it didn't fix the issue.
I am using gamby framework.
I just removed next line that I found on CSS file
html, body {
height: 100%;
overflow-x:hidden;
}
I am not sure why this cause the bug, but it works now.
I have a menu div on the left of my page (choptlogic.com), and in firefox and chrome it scrolls a bit, which I don't want it to do. In Safari, its perfect doesn't scroll at all. I've looked to see if any elements have excess padding that might be causing something, but the header class has an autoflow-y set to auto, so I'm a bit lost as to what might be causing this.
any help greatly appreciated!
thanks!
If you've got an element that is scrolling unnecessarily you can try to hide the overflow using CSS:
div {
overflow: hidden;
}
At line 8995 add in your rule overflow:hidden
.header-inverse #page, .header-inverse .header, .header-inverse .header__inner-wrap
{
background-color: #09769f;
overflow: hidden;
}