I’m getting a slightly different problem.
I've got:
overflow-x: hidden;
overflow-y: auto;
As soon as I turn on:
-webkit-overflow-scrolling: touch;
Then all of a sudden horizontal scrolling works, which isn't what I want. Any idea?
Thanks
Related
First off, thanks in advance for the help!
I'm having an issue with safari and overflow-y: scroll; adding a bunch of blank space per div. However overflow-y: hidden; does not add the extra space, but obviously my divs are not scollable with overflow hidden. This is only a problem with Safari, all other browsers are behaving as expected. Any help is greatly appreciated, ran out of ideas on how to get Safari to behave.
with overflow-y: scroll;
with overflow-y: hidden;
all i actually needed was vertical-align: top;. if anyone ends up with the same issue with Safari, go with that vertical-align.
To clip my webpage to the screen, I use this code in CSS:
html, body {
max-width: 100%;
overflow-x: hidden;
}
However, when scrolling on iOS, the page becomes choppy. I tried using this code:
-webkit-overflow-scrolling: touch;
All it did for me is change overflow-x to scroll (although with overflow-x is scrollable, the page scrolls smoothly). I have also tried putting the code above as a style in HTML.
Thanks in advance.
When using:
-webkit-overflow-scrolling: touch;
You must also set:
overflow-y: scroll;
Hope this helps!
The scroll-bar thumb size keeps increasing when I scroll a 'overflow-y:scroll' div in iPad. Any idea how to fix this design break??
position: absolute;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
The above is the basic style set for the element.
This is how it looks in iPad as scrolled to almost bottom of the div.
This is the expected behaviour :
Try to use native scrolling with: -webkit-overflow-scrolling: touch;
Safari Developer Library Reference
I tried to reproduce this behaviour with the ipad simulator http://codepen.io/anon/pen/kApKB
The problem could also be the variable height.
I'd like to have a scrollbar at the bottom of the div but this CSS works only in Firefox, not Webkit browsers like Safari or Chrome.
div.hoge {
width: 500px;
overflow: auto;
}
I googled and found some pages mentioning you should use overflow-x or -webkit-overflow-scrolling but they didn't work either. Need to use some JSs? Any guesses?
If you need a scroll bar to appear always then, you can use overflow: scroll
If you need vertical scroller then, overflow-y: scroll
If you need only horizontal scroller then, overflow-x: scroll
As per the questions title: You can write mozilla specific styles like this
#-moz-document url-prefix() {
div.hoge {
width: 500px;
overflow: auto;
}
}
Here is an example fiddle of a div that scrolls on x. If you don't include the white-space: nowrap, then the text just wraps within the div and only the vertical (y-direction) scroll bar actually scrolls.
The fiddle shows two div elements; one with nowrap and one without. Also I put borders on the div to make it easier to see.
overflow: auto; doesn't make scrolling DIV, use overflow: scroll;
if you want it on any particular axis, then use overflow-x: scroll; or overflow-y: scroll;
Have you tried overflow-x:scroll; ?
Also make sure that the div.hoge has the enough height to display the scroll bar at the bottom.
I had an issue with this scroll as in this image:
The issue is that I want only the vertical scroll to appear and not the horizontal scroll. I had used overflow:scroll attribute while coding. Will it look the same in Firefox and IE or is there any other way to do that?
Just use overflow-x: hidden; overflow-y: scroll; or overflow: auto; instead of overflow: scroll;.