Check if element is fully visible in overflow scro

问题:

I've created a container with overflow scroll for a list of elements, when click on an element, it would then triggers an event, I'm wondering how can I check if the element is fully visible, if it's not visible, make the outter div scroll until the element is fully visible than trigger event.

Is there a way of doing the scrolling with a combination of native css3 animation and some js?

Only needs to work for webkit browser, more specifically mobile safari.

Heres some sample code of my efforts so far:

http://jsfiddle.net/calebo/hywnc/

回答1:

There you go: http://jsfiddle.net/hywnc/17/

I am using the scrollTo plugin for the scrolling/animation; and to find the right slide i am seeking for the first one whose offset is greater than 10; and then i assume that the previous one is the target.

if ($this.offset().left >= 10) {
    // Other logic
    return false // Return false to stop the jQuery each method
}

Good luck