检查用户是否滚动到底部（不仅仅是窗口，而是任何元素）

Question

我正在制作一个分页系统（有点像 Facebook），当用户滚动到底部时会加载内容。我认为最好的方法是找到用户何时位于页面底部并运行 Ajax 查询来加载更多帖子。

唯一的问题是我不知道如何检查用户是否已滚动到页面底部。有什么想法吗？

我正在使用 jQuery，因此请随意提供使用它的答案。

Answer 1

在 window.scroll() 事件>，像这样：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

你可以在这里测试，这需要窗口的顶部滚动，那么如何它向下滚动，添加可见窗口的高度并检查它是否等于整体内容（文档）的高度。如果您想检查用户是否接近底部，则看起来像这样：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

您可以在此处测试该版本，只需将 100 调整为您想要触发的底部的任何像素即可。

Answer 2

TL;博士;

Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) < 1

概念

从本质上讲，“滚动到底部”是指可滚动区域 (scrollHeight) 减去可见内容距顶部的距离 (scrollTop) 的时刻等于可见内容的高度 (clientHeight)。

换句话说，当这种等价性成立时，我们就会“滚动”::

scrollHeight - scrollTop - clientHeight === 0

防止舍入错误

提到 但是，其中一些属性是四舍五入的< /a>，这意味着在 scrollTop 具有小数部分或舍入值对齐不良的情况下，相等可能会失败。

通过将绝对差值与可容忍的阈值进行比较，可以缓解该问题：

Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1

防止路由错误的代码片段可能如下所示：

document.getElementById('constrained-container').addEventListener('scroll', event => {
    const {scrollHeight, scrollTop, clientHeight} = event.target;

    if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
        console.log('scrolled');
    }
});

#constrained-container {
  height: 150px;
  overflow-y: scroll;
}

#very-long-content {
  height: 600px;
}

<div id="constrained-container">
  <div id="very-long-content">
    scroll me to the bottom
  </div>
</div>

请注意，我添加了一个对于其容器而言太大而无法强制滚动的 div，但无需将内容“包装”在另一个元素中，直接在元素中添加文本会使元素溢出。

去抖动、延迟和节流

我对它了解得越多，就越发现它不在这个答案的范围内（这个代码审查问题及其答案，以及这个链接的文章很有趣），但在特定情况下（如果处理程序执行昂贵的计算，如果我们将动画绑定到滚动事件，如果我们只想在滚动运动结束时启动事件，或者任何可能需要它的情况）它可以用于：

• 反跳（在第一次滚动发生时触发处理程序，然后防止它触发得太快），
• 延迟（阻止处理程序的执行，直到滚动事件没有被触发）一段时间。这在 ECMAScript 上下文中通常称为去抖动）
• 或节流（防止处理程序在每个时间段触发多次）。

在选择执行这些操作时必须非常小心，例如限制事件可能会阻止最后一个滚动条触发，这可能会完全击败无限滚动条。

大多数时候，不做这三件事中的任何一件都可以很好地工作，因为只是看看我们是否完全滚动是相对便宜的。

Answer 3

Nick Craver 的答案 工作正常，避免了 $(document).height() 的值因浏览器而异的问题。

要使其适用于所有浏览器，请使用 James Padolsey< /a>：

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

代替$(document).height()，因此最终代码为：

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });

Answer 4

进一步的优秀接受 Nick Craver 的回答，您可以限制滚动事件，使其不会频繁触发，从而提高浏览器性能：

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}

Answer 5

Nick Craver 的答案 需要稍微修改一下才能在 iOS 6 Safari Mobile 上工作，并且应该是：

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

更改 $( window).height() 到 window.innerHeight 应该这样做，因为当地址栏隐藏时，会添加额外的 60 像素窗口的高度，但使用 $(window).height() 不会反映此更改，而使用 window.innerHeight 则会反映此更改。

注意：window.innerHeight 属性还包括水平滚动条的高度（如果已呈现），与 $(window).height() 不同其中不包括水平滚动条的高度。这在 Mobile Safari 中不是问题，但可能会导致其他浏览器或未来版本的 Mobile Safari 中出现意外行为。将 == 更改为 >= 可以解决大多数常见用例的问题。

详细了解 window.innerHeight 属性 这里。

Answer 6

这是一个相当简单的方法

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

示例

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

其中 elm 是从 ie 检索的元素document.getElementById。

Answer 7

请检查此答案 。

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

您可以执行 footerHeight - document.body.offsetHeight 来查看您是否靠近页脚或到达页脚。

Answer 8

这是一段可以帮助您调试代码的代码。我测试了上面的答案，发现它们有问题。我已在 Chrome、Internet Explorer、Firefox、iPad (Safari）。我没有安装任何其他解决方案来测试...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

可能有一个更简单的解决方案，但我停在了它起作用的地方

如果您仍然遇到问题对于一些流氓浏览器，这里有一些代码可以帮助您调试：

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

Answer 9

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

它计算滚动条到元素底部的距离。
如果滚动条到达底部，则等于 0。

Answer 10

这是一个普通的 JavaScript 解决方案，使用 ES6 和 debounce:

document.addEventListener('scroll', debounce(() => {
  if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
    // Do something
  }
}, 500))

function debounce(e,t=300){let u;return(...i)=>{clearTimeout(u),u=setTimeout(()=>{e.apply(this,i)},t)}}

演示： https:// jsbin.com/jicikaruta/1/edit?js,output

参考文献：

• scrollHeight
• pageYOffset
• innerHeight
• < a href="https://www.freecodecamp.org/news/javascript-debounce-example" rel="nofollow noreferrer">反跳

Answer 11

这是我的两分：

$('#container_element').scroll(function() {
    console.log($(this).scrollTop() + ' + ' + $(this).height() + ' = ' + ($(this).scrollTop() + $(this).height()) + ' _ ' + $(this)[0].scrollHeight);
    if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight) {
        console.log('bottom found');
    }
});

Answer 12

使用 Intersection Observer 是最便宜的检查工具如果最后一个元素在视口上可见（这意味着用户已滚动到底部）。它还通过 polyfill。

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Answer 13

我的纯js解决方案：

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
        alert('Bottom');
    }
});

#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Answer 14

尼克回答说很好，但是您将拥有在滚动时重复自身的功能，或者如果用户缩放了窗口则根本无法工作。我想出了一个简单的解决办法，只需 math.round 第一个高度，它的工作原理就像假设的那样。

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

Answer 15

我用纯 JavaScript 以一种非常简单的方式完成了这一点：

function onScroll() {
    if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight - 50) {
        Console.log('Reached bottom')
    }
}
window.addEventListener("scroll", onScroll);

Answer 16

如果有人想要一个普通的 JavaScript 解决方案，并且需要检测用户何时滚动到

的底部，我设法使用这些代码行来实现它

window.addEventListener("scroll", () => {
    var offset = element.getBoundingClientRect().top - element.offsetParent.getBoundingClientRect().top;
    const top = window.pageYOffset + window.innerHeight - offset;

    if (top === element.scrollHeight) {
        console.log("bottom");
    }
}, { passive: false });

Answer 17

我使用此测试来检测滚动到达底部：

event.target.scrollTop === event.target.scrollHeight - event.target.offsetHeight

Answer 18

Safari 可以滚动到页面底部，这导致我们的应用程序出现错误。使用 >= 而不是 === 解决此问题。

container.scrollTop >= container.scrollHeight - container.clientHeight

Answer 19

所有这些解决方案在 Firefox 和 Chrome 上都不适合我，因此我使用 Miles O'Keefe 和 < a href="https://stackoverflow.com/a/3333336/3406616">meder omuraliev 像这样：

function getDocHeight()
{
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

Answer 20

您可以尝试以下代码，

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

Answer 21

如果滚动到底部，请尝试此匹配条件

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Answer 22

当检查可滚动元素（即不是窗口）时，这会给出准确的结果：

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeight应该给出实际可见 元素的高度（包括内边距、边距、和滚动条），scrollHeight 是元素的整个高度，包括不可见（溢出）地区。

jQuery 的 .outerHeight() 应该给出与 JS 的 .offsetHeight 类似的结果 --
MDN 中关于 offsetHeight 的文档并不清楚其跨浏览器支持。为了涵盖更多选项，这更加完整：

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

Answer 23

这是我的两分钱，因为接受的答案对我不起作用。

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;

Answer 24

(2021)
这里的很多答案都涉及对 element 的引用，但如果您只关心整个页面，只需使用：

function isBottom() {
  const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
  const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
  return distanceFromBottom < 20; // adjust the number 20 yourself
}

Answer 25

我使用了 ddanone 的回答并添加了 Ajax 调用。

$('#mydiv').on('scroll', function() {
    function infiniScroll(this);
});

function infiniScroll(mydiv) {
    console.log($(mydiv).scrollTop() + ' + ' + $(mydiv).height() + ' = ' + ($(mydiv).scrollTop() + $(mydiv).height()) + ' _ ' + $(mydiv)[0].scrollHeight);

    if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight) {
        console.log('bottom found');
        if(!$.active){ // If there isn't any Ajax call active
                       // (the last Ajax call waiting for results)
                       // do my Ajax call again
            myAjaxCall();
        }
    }
}

Answer 26

如果您调用 $(window).height()，Google Chrome 就会给出页面的完整高度。

相反，使用 window.innerHeight 来检索窗口的高度。

必要的检查应该是：

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Answer 27

许多其他解决方案对我不起作用，因为滚动到底部时，我的 div 触发了警报两次，向上移动时也触发了几个像素，因此解决方案是：

$('#your-div').on('resize scroll', function()
{
    if ($(this).scrollTop() +
        $(this).innerHeight() >=
        $(this)[0].scrollHeight + 10)
    {
        alert('reached bottom!');
    }
});

Answer 28

尝试了所有答案，但没有一个对我有用。但是，一些答案没有考虑缩放问题，当用户放大或缩小时，计算可能无法按预期进行。

以下是您需要在 ReactJS 中执行的操作：

假设我们有一个物理屏幕分辨率为 1920x1080 像素且设备像素比为 2 的设备。这意味着设备的虚拟屏幕分辨率为 960x540 CSS 像素（由于设备像素比为 2，因此 CSS 像素数是物理像素数的一半）。

现在假设我们要计算视口的物理像素高度。我们可以通过将 CSS 像素中的视口高度（可以使用 document.documentElement.clientHeight 获得）乘以设备像素比（可以使用 window.devicePixelRatio 获得）来实现此目的）。

因此，如果以 CSS 像素为单位的视口高度为 540，则：

const clientHeight = document.documentElement.clientHeight * window.devicePixelRatio;

const viewportHeightInPixels = clientHeight; // since devicePixelRatio is 2 in this example
console.log(viewportHeightInPixels); // Output: 1080

在本示例中，viewportHeightInPixels 将等于 1080，因为我们已将以 CSS 像素为单位的视口高度（即 540）乘以设备像素比 (<是 2）。

这告诉我们，视口的物理像素高度为1080，这与设备的物理屏幕分辨率相同。

下面是一个示例代码片段，它使用此计算来检查用户是否已滚动到页面底部：

import { useEffect } from "react";

export default function CheckUserScroll(onBottomReached) {
  useEffect(() => {
    function handleScroll() {
      console.log('handleScroll')
      const scrollTop = document.documentElement.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight;
      // Calculates the height of the client viewport, adjusted for the device's pixel ratio
      const clientHeight = document.documentElement.clientHeight * window.devicePixelRatio;
      if (scrollTop + clientHeight >= scrollHeight) {
        onBottomReached();
      }
    }
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [onBottomReached]);
}

以下是如何在 JSX 代码中使用它：

import React from 'react';
import CheckUserScroll from './CheckUserScroll';

export default function Test() {
  function handleBottomReached() {
    console.log('bottom reached!');
    // do something else here
  }

  return (
    <div>
      <CheckUserScroll bottomReached={handleBottomReached} />
      <div style={{ height: '3000px' }}>Scroll down to trigger bottomReached function</div>
    </div>
  );
}

Answer 29

停止重复提醒尼克的回答

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}

Answer 30

这是最简单的方法：

const handleScroll = () => {
if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
   console.log('scrolled to the bottom')
}}

window.addEventListener('scroll', handleScroll)