How to enable scrolling in a div on a mobile device?

F

Finom2012-05-30 21:51:11

css

Finom, 2012-05-30 21:51:11

All good.
How to implement scrolling in a div with overflow: scroll on a device with a touch interface?
jsfiddle.net/H7EAu/9/ - It doesn't work in this example, as it does in the project I'm working on right now.
(Device - Kindle Fire)

Reply

Answer the question

In order to leave comments, you need to log in

6 answer(s)

V

Vitaliy Petrychuk, 2012-05-30
@vermilion1

It 's a browser glitch

S

SerDIDG, 2012-05-30
@SerDIDG

It depends on the browser, for example, Opera Mobile has it, but Firefox for Android does not.

It is best to make a custom one, if you need a scroll, there are many ready-made libraries. But to be honest, scrolling is not the best solution for touch interfaces.

S

SharkyFLY, 2012-05-30
@SharkyFLY

in ios safari, scroll with one finger - the whole page, with two fingers - scroll divs, iframes, etc.

E

evnuh, 2012-05-30
@evnuh

Recently implemented scrolling on iOS Safari. There you need to subscribe to three methods: onTouchStart (we determine which div to scroll), onTouchMove (we scroll depending on the coordinates of the finger), onTouchEnd (we stop scrolling).
jQuery has a library with 150 lines of code: baijs.nl/tinyscrollbar/
On iOS, unfortunately, it only scrolls with sliders. I finished it to the mind so that the HTML does not crap and that scrolling works on iOS with one finger. If needed, I can drop it.

T

TheMengzor, 2012-05-31
@TheMengzor

cubiq.org/iscroll

E

Egor Merkushev, 2012-06-19
@egormerkushev

Used iScroll - here's an example .