如何实现多方向滚动跟随效果？
我有一个 div 数组，其尺寸大于其容器（父级）。我将溢出设置为隐藏在容器上，并在地图上调用 JQuery Overscroll，使其具有 iPhone http: //www.azoffdesign.com/overscroll。
我遇到了一个问题，如何在用户滚动数组且中心 div（主页）溢出到视线之外时实现跟踪箭头。当用户将“home”滚动到视图之外的溢出区域时，我希望容器的内边缘出现一个箭头，并沿着它沿着边缘移动，无论它在视图之外。对我来说，使用箭头图像，然后旋转它，使其在“home”移动时指向正确的方向是有意义的。
这是我的基础工作> http://jsfiddle.net/virtuapete/QVQ5r/1/
因此有 3 个元素这是为了使其正常工作...“home”之后的图像在溢出时四处移动，图像相对于 home 所在的位置旋转（因此箭头始终指向“home”，然后在 home 后简单地隐藏箭头内变得可见 。
我很确定我以前见过这种效果，为了解决这个问题，我开始查找滚动跟随技术，因为这几乎是这个概念的一个接近的一维示例 我现在已经完全困惑了，而且我的技能还不够强，无法将我找到的差异代码片段融合到所需的结果中，
我发现了一个 jsfiddle ( http://jsfiddle.net/hj57k ）可能符合我想要的内容，一旦对象离开，div就不会跟随对象（在该示例中是光标）容器边界。任何帮助都会很棒，因为我只是被困在如何开始...让 div 跟随物体周围的物体将是一个很好的开始，我可能可以从那里开始...
I have an array of divs which are dimensionally larger than its container (parent). I have overflow set to hidden on the container and call the JQuery Overscroll on the map to give it the feel of an iPhone http://www.azoffdesign.com/overscroll.
I am having an issue tackling how to implement a tracking arrow for when the user scrolls the array and the center div (home) goes into overflow out-of-sight. When the user scrolls "home" out of view into the overflow region, I would like an arrow to appear at the inside edge of the container and follow it around the edge wherever it goes out of view. It makes sense to me to use an image for the arrow, then rotate it so it points in the correct direction as "home" gets moved around.
Here is my fiddle with the base work > http://jsfiddle.net/virtuapete/QVQ5r/1/
So there are 3 elements to this to make it work properly... the image following "home' as it moves around in overflow, rotation of the image with respect to where home is (so the arrow always points to "home" and then simply hiding the arrow once home becomes visible within the container.
I am pretty sure I have seen this effect before and to begin tackling the issue I started looking up scroll follow techniques since that would be a close 1-dimensional example of this concept. Kind of like a multi-directional scroll follow almost. I have reached the point where I have completely confused myself now and I am def not strong enough in my skills to meld diff code snippets I have found into the desired result yet!
I found a jsfiddle ( http://jsfiddle.net/hj57k ) of something that could be along the lines of what I want, without the div following the object (in that example the cursor) once it has left the container boundaries. Any help would be amazing as i am just stuck on how to get going... getting the div to follow the object around the sides would be a great start and I could probably take it from there...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
看一下： http://jsfiddle.net/green/F8gd4/ 或 http://jsfiddle.net/green/GpG3U/。
Have a look: http://jsfiddle.net/green/F8gd4/ or http://jsfiddle.net/green/GpG3U/.
这是用于多方向滚动的更新小提琴。
只需添加四行 JavaScript
Jsfiddle 演示
Here is updated fiddle for multi directional scrolling.
Just add four line javascript like this
Jsfiddle Demo