如何实现多向滚动跟随效果?

时间:2012-01-25 02:04:24

标签: javascript jquery html scroll rotation

我有一个div数组,其尺寸大于其容器(parent)。我有溢出设置隐藏在容器上并在地图上调用JQuery Overscroll以给它一种iPhone http://www.azoffdesign.com/overscroll的感觉。

我遇到了一个问题,解决了当用户滚动数组并且中心div(home)进入溢出视野时如何实现跟踪箭头的问题。当用户将“home”从视图中滚动到溢出区域时,我希望在容器的内边缘出现一个箭头,并在它离开视野时沿着边缘跟随它。我有意义的是使用箭头的图像,然后旋转它,使其指向正确的方向,因为“家”被移动。

这是我的基础工作> http://jsfiddle.net/virtuapete/QVQ5r/1/

所以有3个元素可以让它正常工作......图像跟随“home”,因为它在溢出中移动,图像相对于home所在的位置旋转(所以箭头始终指向“home” “然后简单地隐藏箭头,一旦回家就可以在容器内看到。

我很确定我之前已经看过这个效果并开始解决这个问题我开始查找滚动跟随技术,因为那将是这个概念的一个近似的一维示例。有点像多向滚动几乎跟随。我已经达到了我现在完全迷茫的程度,而且我的技能还不够强大,可以将我找到的差异代码片段融合到所需的结果中!

我找到了一个jsfiddle(http://jsfiddle.net/hj57k)的东西可能是我想要的东西,没有div跟随对象(在该示例中为光标)一旦离开容器边界。任何帮助都会很棒,因为我只是坚持如何开始......让div跟随两侧的物体将是一个很好的开始,我可以从那里拿走它......

2 个答案:

答案 0 :(得分:1)

答案 1 :(得分:1)

这是多方向滚动的更新小提琴。 只需添加像这样的四行javascript

$(".container").overscroll({
    direction: 'auto'
}); 

Jsfiddle Demo