检测访问者是不是滚动到页面中的某个点的最明智的方法是啥？

Posted 2023-05-09

【中文标题】检测访问者是不是滚动到页面中的某个点的最明智的方法是啥？

【英文标题】：What's the wisest way to detect if a visitor has scrolled to a certain point in a page?检测访问者是否滚动到页面中的某个点的最明智的方法是什么？

【发布时间】：2012-04-03 06:44:31

【问题描述】：

我看过这个：

http://imakewebthings.com/jquery-waypoints/#about

并且想将类似的想法融入我拥有的插件中。 Waypoints 看起来很有趣，但可能超出了我的需要。当到达页面上的某个点时，我还想触发警报（或类似的）。

说实话，这与 Google Analytics（分析）和获得更准确的跳出率有关。我暂时不告诉你细节，但我的假设是，如果访问者滚动到页面上的某个位置，然后在访问任何其他页面之前离开，那么这样的单页访问并不是真正的反弹。也就是说，他们与页面交互。这不是一瞥就走。

我有一个 GA 插件，并希望将滚动和/或到达页面上特定位置的想法整合为可跟踪的事件。但在我投入并弄脏我的手之前，我正在铸造一个新的洞察力。

最后，我对此还是很陌生，所以请解释清楚，并在可能的情况下提供有助于我继续深造的链接。

【问题讨论】：

您可以查看插件的代码并提取您感兴趣的部分吗？您可以将函数绑定到滚动事件，并检查滚动值（滚动事件被触发很多次，因此您可能希望最多每 X 毫秒检查一次滚动值）

@Robin - 谢谢。每 X 毫秒轮询一次是个好主意。你能不能给我指点一下呢？

我的意思不是“每 X 毫秒轮询一次”。我的意思是，如果事件每秒被触发 100 次，那么您就不想检查位置 100 次。

【参考方案1】：

您可以使用scroll 事件检查用户是否滚动...

window.addEventListener('scroll', function() 
    // Scrolled.
);

jsFiddle.

// jQuery
$(window).scroll(function() 
    // Scrolled.
);

jsFiddle.

...您可以用document.body.scrollTop 和document.body.scrollLeft 告诉他们在哪里滚动。

var body = document.body,
    scrollTop = body.scrollTop,
    scrollLeft = body.scrollLeft;

jsFiddle.

// jQuery
var body = $('body'),
    scrollTop = body.scrollTop(),
    scrollLeft = body.scrollLeft();

jsFiddle.

【讨论】：

谢谢亚历克斯。幸运的是，我在发布问题后找到了 scroll() 和 scrollTop()。您对提高滚动速度有什么想法吗？换句话说，滚动时飞过某物现在与向下移动页面相同，是吗？

@ChiefAlchemist 您可以在scroll 事件上使用超时，以获取滚动距离的增量。如果超出某个阈值，您可以假设用户滚动速度很快。