Use iScroll to create a Picker with the snap-feature

Question

I'm trying to create a list which looks and feels like a typical 'Picker', this means it's a normal list which fades out at the top and bottom, and there's a mask overlay in the middle. Example

The problem with the normal list is it starts with the first <li>-element on top while it should be in the middle, and scrolling down to the the last element it's at the bottom while it should be in the middle.

To fix this, I implemented some padding . However after scrolling down and back up, the padding isn't applied anymore. I think this has something to do with the maxScrollY in the source code.

Has anyone ever tried something like this, or alternatives?

Here's the code:

var myScroll = new iScroll('hour-list-wrapper', { snap: "li", momentum: false, vScrollbar: false } );

http://jsfiddle.net/2kBdv/3

Answer 1

Mobiscroll library would make it easier for you, see the demo here http://demo.mobiscroll.com/select/select

If you want to create your custom solution for this anyway you can look for some inspiration in the source code.