检查溢出滚动DIV中元素是否完全可见 [英] Check if element is fully visible in overflow scrolling DIV

问题描述

我已经为一个元素列表创建了一个带有溢出滚动的容器，当点击一个元素时，它会触发一个事件，我想知道如何检查该元素是否完全可见，如果它不可见，使outter div滚动，直到元素完全可见而不是触发事件。

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.

有没有办法用原生css3动画和一些js的组合进行滚动？

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

只需要为webkit浏览器工作，更具体地说是移动游猎。

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 /

推荐答案

你去：
http://jsfiddle.net/hywnc/17/

我正在使用滚动/动画的 scrollTo 插件mation;并找到正确的幻灯片我正在寻找第一个偏移量大于10的幻灯片;然后我假设前一个是目标。

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
}

祝你好运

这篇关于检查溢出滚动DIV中元素是否完全可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！