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

【问题标题】：Detect dead scrolling at the bottom of the page (mousewheel, scroll events)检测页面底部的死滚动（鼠标滚轮、滚动事件）
【发布时间】：2015-04-27 15:58:39
【问题描述】：

我希望检测用户何时滚动到页面底部，然后尝试继续滚动但没有任何内容可滚动/查看。

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

我需要在鼠标滚轮事件启动但页面不滚动时触发的东西，向上/向下方向。

【问题讨论】：

显示你的代码你做了什么...
您需要付出一些努力，stackoverflow 不是一个可以接收任何问题的完整代码解决方案的网站。
你为什么不用 jquery 设置一个测试，看看当死滚动发生时滚动事件是否会触发
This is probably just what you need
jsfiddle.net/c8s37f76 当您在到达底部时尝试向下滚动更多时，不会触发滚动事件

标签： javascript jquery scroll mousewheel

【解决方案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');
});

我正在使用鼠标滚轮插件，它非常棒，而且对于任何良好的跨浏览器支持，无论如何你都必须编写一堆代码来规范滚轮事件......

https://plugins.jquery.com/mousewheel/

我想这会解决问题中提出的问题 - 检测鼠标滚轮事件是否会使页面滚动超出其限制。对于思想实验，尽管您也可以领先一步，但只有在 mousewheel 用作设置器时才能准确。当用户触发鼠标滚轮事件时，可以使页面滚动精确数量的像素。当页面的目的地已知时，您可以检查它是否落在页面的顶部或底部。

【讨论】：

很好，让我试试看。
这成功了吗？如果您在用户滚动到页面的外部边界时需要像素精度，您可以考虑使用我编写的平滑滚动脚本（上面的 sn-p 取自）：codepen.io/Shikkediel/pen/GJRbOV?editors=001。
效果很好。谢谢！

【解决方案2】：

添加窗口 scrollTop() 和高度。如果它等于文档高度，则您位于页面底部。

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

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

【讨论】：

很好，但是一旦它到达底部，并且用户试图继续滚动，我们可以触发其他东西吗？
您只需将您想做的任何事情都放在控制台日志的位置
旧的，但仍然......一旦到达底部，滚动事件不会继续触发，所以这不起作用。 console.log 只发生一次，如果你在到达底部时继续滚动，它就不会再触发了。 OP 想要一些东西来检测一个人在到达终点后何时继续滚动。