检测页面底部的死滚动（鼠标滚轮，滚动事件）

Question

我希望能够检测用户是否滚动到页面底部并尝试继续滚动但没有内容可供滚动/查看。

我正在创建可用性指标，其中死滚动是一种指标，并且需要一种准确检测用户尝试滚动但没有剩余内容可供查看的方法。

我需要当鼠标滚轮事件触发但页面未滚动时（包括向上/向下方向）触发某些内容。

- Collarbone

---

展示你的代码，展示你所做的... - Choxx

你需要展示一些努力，StackOverflow不是一个可以获得任何问题完整代码解决方案的网站。 - Trader

为什么不使用jQuery设置一个测试，看看当死滚动发生时是否会触发滚动事件呢？ - Huangism

这可能就是你所需要的。 - joakim

http://jsfiddle.net/c8s37f76/ 当你滚动到底部并尝试向下滚动时，滚动事件不会触发。 - Huangism

请查看https://dev59.com/J2sy5IYBdhLWcg3w-i_h，那里有一个你可以使用的插件。我从未使用过它，但我认为你可以研究一下。 - Huangism

Answer 1

这是我正在使用的脚本中的一部分，用于在到达页面底部时停止页面滚动动画：

var gate = $(window), edge;
setLength();

gate.resize(function() {
  setLength();
});

function setLength() {
  edge = $(document).height()-gate.height();
}

gate.mousewheel(function(event, delta) {

    outset = gate.scrollTop();
    if (delta == 1 && outset == 0 ) console.log('top');
    if (delta == -1 && outset == edge) console.log('bottom');
});

我正在使用鼠标滚轮插件，它非常好用。为了获得良好的跨浏览器支持，您必须编写大量代码来标准化滚轮事件... 我想这将完成问题中的要求-检测鼠标滚轮事件是否会使页面滚动超出其限制。不过，对于这个思维实验，如果将mousewheel用作setter，你也可以更加精确地掌握滚轮事件。当用户触发鼠标滚轮事件时，可以使页面滚动固定数量的像素。当页面的目标已知时，您可以检查是否达到了页面顶部或底部。请参考https://plugins.jquery.com/mousewheel/。

- Shikkediel

---

好的，让我试一下。 - Collarbone

这个可行吗？如果您需要在用户向页面的外部极限滚动时获得像素精度，您可以考虑使用我编写的平滑滚动脚本（上面的代码片段来自此处）：http://codepen.io/Shikkediel/pen/GJRbOV?editors=001。 - Shikkediel

非常好，谢谢！ - Collarbone

Answer 2

添加windows的scrollTop()和height。如果它们等于文档的高度，那么你就到达了页面底部。

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       console.log("Page bottom reached!");
   }
});

http://jsfiddle.net/1v3cakn9/1/

- Walker Boh

---

很好，但是一旦它到达底部，如果用户尝试继续滚动，我们能否触发其他的东西？ - Collarbone

你只需要将想要执行的任何代码放在 console log 的位置。 - Walker Boh

虽然老旧但依然有用。滚动事件一旦到达底部就不再触发，所以这并不起作用。如果您在达到底部时继续滚动，则console.log仅会发生一次而不再触发。OP希望有一种方法可以检测到一个人在到达底部后继续滚动的情况。 - jsfrocha