3

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/

calebo
  • 2,758
  • 7
  • 37
  • 65
  • check this question: https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport .. just adopt it to the div instead of the whole viewport – Nils Rückmann Aug 20 '17 at 16:45

1 Answers1

0

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

Ivan Castellanos
  • 7,234
  • 1
  • 39
  • 39
  • Hi, I don't think that's right. you are meant to click on the 4th item not fully visible), then it should scroll/pull to the left, and the 4th item will be fully visible, then trigger event specific to a content item. – calebo Jan 10 '12 at 02:50
  • Read your question again please. You don't event mention the word "click". Rewrite it correctly and i will help you out. – Ivan Castellanos Jan 10 '12 at 03:46