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!
Related
I am converting a Static Page to Responsive Page. When I resized my page to a lower width then horizontal scroll-bar and some amount of margin is also appearing in the bottom and right side of last div/Footer.
I have used overflow property in my code but still I am not getting the desired result.
body {
margin:0%;
padding:0%;
overflow-x: hidden;
}.
Due to some problem with imgur, I am unable to upload an image of my problem.
Please, suggest me some advise.
try this
body {
overflow-x: hidden;
max-width: 100%;
}
Open developer tools (F12) and locate the block that goes beyond the border of the page but the best, show your page code.
overflow-x: hidden; os only for horizontal overflow: This still allows for a scrollbar at the right side for vertical scrolling.
overflow: hidden; is both for horizontal and vertival overflow.
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
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;.