Currently I am using a vertical scrollbar for a div when the contents are larger than the height of the div. This works great on Chrome, IE 7(!) and Firefox.
However, on IOS devices like iPad and iPhone there are no scrollbars for divs. What is the recommended solution? For simplicity, I want to run the same code on all platforms: Chrome, IE 7+, Firefox, iPhone and iPad.
Thanks!
Actually there is an in-element scrollbar in iOS, it's just hidden until it's in use :( You use a two-finger drag to activate an element's scroll.
I don't think you can override the OS hiding the scrollbar, but overflow-y: scroll; in css is mostly likely what you want.
Related
Safari mobile.
If i scroll sidebar, it is doing very quickly. But if I try scroll Dialog content, it is doing very slow and sometimes scroll background instead..
I wrote video, where you can find that effect.
https://yadi.sk/i/VXgqHfW83YbbN3
Does any solutions for this situation?
To make the Dialog content scroll normally on iOS, you have to add -webkit-overflow-scrolling: touch; to the CSS.
The background scrolling when you don't want it to is a bit of a harder problem, but you can find some more information here: iOS - css/js - Overlay scroll but prevent body scroll
I created my first iOS 5.0 iPhone app and the app's actual size is 480 width by 320 height, which is the default size of the iPhone.
My problem is I don't want the app to allow scrollbars or what I really mean is the ability to scroll past the 320 in height which is happening.
I looked at the Safari Web Content guide here
I still can't seem to figure this out can anyone suggest a fix.
Thanks.
you can do two things. in your css set your main wrapper to overflow:hidden;
also add this to your js onDeviceReady()
document.addEventListener('touchmove',function(event){event.preventDefault()});
that will not allow any scrolling and lock the app down.
NOW if you do want to allow scrolling I suggest looking into iScroll it's really easy to set up and get working, and will give a native look and feel to the scrolling.
I am making a web app for the Android and iPhone that has a div for content. I can update the div programmatically and have it scroll down but I can't scroll using just my finger.
You can see it here: http://crosswordcoach.appspot.com/poc
Type in "Cookie firs" and then select that clue (obviously there are other bugs to work out!) and it will have enough hints to fill the screen. With Chrome on a PC it works correctly and the list becomes scrollable if it is too big for the screen. On the iPhone and Android it does not.
Does anyone know what the deal is? Thanks!
iPhones cannot scroll absolute positioned divs by default, I believe.
iScroll might help.
I am using Rhomobile to develop apps. I have wide images on an app and would like to enable horizontal scrolling to view the images. Vertical scrolling is automatically available but not for horizontal scrolling. Here's what I found:
I cannot scroll horizontally in Rhodes simulator.
I cannot scroll horizontally in Android emulator.
I cannot scroll horizontally in HTC android.
But I can scroll horizontally in Samsung Galaxy Tab.
I've tried to put "overflow:scroll", setting div width, body width, but the result are still the same.
I believe this would be a limitation on the device or emulators browser, as Rhodes is using a WebView.
I removed jqtouch.css and it works now :)
Try with
Scroll : 'horizontal'
Apple has disabled the overflow CSS aspect in mobile Safari so it is not possible to scroll inside a fixed height div. This is quite annoying.
While making an iPhone native app, is it possible to access WebKit settings to turn that feature on ?
You can scroll with 2 fingers.
If you don't want to scroll with 2 fingers, try http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16.
WebKit is a private framework, so you can't do anything even if you develop a native app (for AppStore).
Nope. Sorry - you'll have to use js to position things.
It's disabled because you aren't "scrolling", you are moving the viewport, so position-fixed doesn't make sense.