当前位置：文江博客话题详情

在 iOS 上的 Safari 中滚动时如何监控滚动位置？

发布于 2025-01-03 22:17:58 字数 307 浏览 1 评论 0 原文

我目前使用 $(window).bind('scroll', foo); 来监视 $(window).scrollTop() 并执行一些操作来创建视差效果。

在所有桌面浏览器中，用户滚动的每个像素都会调用 foo() ，一切都很好。在 iOS 上的 Safari 中，滚动事件仅在滚动完成后才会触发。

我添加了 $(window).bind('touchmove', foo); 以确保在 iOS 中滑动期间调用该函数，这让我更进一步。当用户释放手指时，页面继续滚动，但事件停止触发。

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦行七里 2025-01-10 22:17:58

当我看到你的问题时，我正计划为此做一个填充（如果不存在的话？）。不幸的是我的时间很少。

这个想法是有一个setInterval，它在ontouchstart启动，它检查document.body.scrollTop自上次以来是否发生了变化，例如。每 20 毫秒。如果是，那么我们手动调度滚动事件。否则我们 clearInterval 因为显然不再发生滚动。

这将是简短的。如果您有更多时间（比我多），那么请随意尝试这些指南。

编辑：现在，进一步阅读，另一个答案似乎提出了相同的想法。您确定在 iPad 上滚动时间隔会停止吗？

回复收藏 0 原文

暗藏城府 2025-01-10 22:17:58

我强烈推荐使用“Skrollr”javascript 库。它是迄今为止我发现的最好的移动滚动动画选项，并且非常容易快速启动和运行。根据开始和结束滚动位置创建动画并操作 CSS。根据大多数标准 CSS 属性的需要创建尽可能多的数据滚动位置和动画。

在以下示例中，背景颜色将在 500 像素滚动过程中呈现动画效果：

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

在 Git 上查看存储库：https:// /github.com/Prinzhorn/skrollr

Skrollr 演示示例：http://prinzhorn.github.io/skrollr/

很棒的现实世界示例：http://www.fontwalk.de/03/

I highly recommend using the "Skrollr" javascript library. It is by far the best mobile scrolling animation option that I've found to date and is very easy to get up and running quickly. Create animations and manipulate CSS based on a start and end scroll position. Create as many data scroll positions and animations as you need for most standard CSS properties.

In the following example the background color would animate over the course of a 500 pixel scroll:

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

Checkout the repository on Git: https://github.com/Prinzhorn/skrollr

Skrollr Demo Example: http://prinzhorn.github.io/skrollr/

Awesome real world example: http://www.fontwalk.de/03/

回复收藏 0 原文

水中月 2025-01-10 22:17:58

Apple 的 iPhone 5c 网页使用了一些视差滚动效果，这些效果似乎在您的手指仍然触摸屏幕并滚动时仍在继续。所以我猜想在滚动过程中不能完全禁用javascript。 Tuult Hype 也提供了此功能。

回复收藏 0 原文

肤浅与狂妄 2025-01-10 22:17:58

虽然这不可能开箱即用，但可以这么说，您可以使用 iscroll< /a>

因此，您可以将 iScroll 用于 iOS 和 Android 移动设备/平板电脑，并使用当前用于桌面设备的方式。

iScroll 有很多选项可以在某些事件上调用回调函数 - 例如“onScrollMove”、“onBeforeScrollEnd”、“onTouchEnd”等。不幸的是，没有一个选项可以在“每个位置更改（包括更改）”时执行回调由用户停止触摸屏幕后滚动的动量引起的”。但是，添加一个很容易。

在 iScroll 源代码中，第 127 行左右，靠近“//Events”注释，添加一个新变量：

onPosChange: null

然后，在第 308 行左右，在“_pos”函数的末尾，添加此行：（

if (this.options.onPosChange) this.options.onPosChange.call();

这将仅调用该函数传入“onPosChange”选项（如果存在）。

完成此操作后，以下示例代码将为 id="iscroll_container" 的 div 设置 iScroll，并在每次更改时将 Y 偏移打印到控制台：

var myScroll;
function loaded() {
    myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

function actOnScroll(){
    console.log('got a scroll move! Vert offset is: ' + myScroll.y);
}

注意，Ben the Bodyguard Parallax Site 通过使用 iScroll 在 iPad 上运行（他们使用了更旧版本的 iscroll，并且不完全按照我描述的方式进行操作）此处）

此外，Life of Pi Parallax Site 在 iPad 上运行得非常好 - 我不知道他们是怎么做的是的，但至少它证明了这是可能的！

While this isn't possible out of the box, so to speak, you can do it using iscroll

So, you'd use iScroll for iOS and Android mobile devices / tablets, and use the way you're currently doing it for desktop devices.

iScroll has a bunch of options for callback functions to be called on certain events - such as 'onScrollMove', 'onBeforeScrollEnd', 'onTouchEnd', etc. Unfortunately, there's not an option to execute a callback on "EVERY position change, including changes cause by the momentum of scrolling after the user has stoped touching the screen". But, it's easy enough to add one.

In the iScroll source, around line 127, near the "//Events" comment, add a new variable:

onPosChange: null

Then, around line 308, at the end of the "_pos" function, add this line:

if (this.options.onPosChange) this.options.onPosChange.call();

(that will just call the function passed in the "onPosChange" option, if it exists).

Having done that, the following example code will set up iScroll for the div with id="iscroll_container", and will print the Y-offset to the console each time it changes:

var myScroll;
function loaded() {
    myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

function actOnScroll(){
    console.log('got a scroll move! Vert offset is: ' + myScroll.y);
}

Note, Ben the Bodyguard Parallax Site works on iPad by using iScroll (they use a much older version of iscroll and don't do it exactly the way I described here)

Also, Life of Pi Parallax Site works on iPad really nicely - I can't figure out how they do it, but at least it proves it's possible!

回复收藏 0 原文