CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mahendra Liya
Mahendra Liya

Reputation: 13218

How can we scroll items inside a div with Touch events

I am designing a code snippet which will allow the user to scroll the items inside a div. Its more of a spinning wheel / slot machine. I know an existing solution for iPhone / iPod, but I wanted to have a simple stripped down code.

I have not used any images, and I believe this would involve CSS3 animations. So far here is my code in jsbin. I have tried binding the touchmove event using jquery, but the alert is not popping up?

My main aim is to enable the user to scroll / swipe Up & down the items inside the div, without making the page scroll up and down. Any suggestion / edits to the code are appreciated.

My intended use for this is for mobile devices (iPhone / Android)

Thanks in advance.

Upvotes: 1

Views: 6084

Answers (2)

copenndthagen
copenndthagen

Reputation: 50732

I think what you are looking for can be achieved by simply using the deafult behavior on IOS Safari (iPhone/iPad)

Just give some fixed height to the container div with overflow e.g.

<div id="container" style="height:400px;overflow:auto">
Your content
</div>

It would scroll using 2-fingers on versions prior to IOS5 and with a single-finger move for IOS5 and later..

Upvotes: 0

J&#246;rn Berkefeld
J&#246;rn Berkefeld

Reputation: 2579

you've almost been on the right side:

http://cubiq.org/iscroll-4 try iScroll.

only limitation that i encountered during my test was that you have to wrap your code in a list (ul) - though that could have been my bad

Upvotes: 1

Related Questions