尼克回答它的好，但你会有函数，它在滚动时重复自己或将不会工作，如果用户有窗口放大。我想到了一个简单的解决方法只用数学。绕第一个高度，就像假设的那样。

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

Nick Craver的回答需要稍作修改，以适应iOS 6 Safari Mobile，应该是:

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

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

注:窗口。innerHeight属性还包括水平滚动条的高度(如果它被渲染)，不像$(window).height()不包括水平滚动条的高度。这在Mobile Safari中不是问题，但在其他浏览器或未来版本的Mobile Safari中可能会导致意想不到的行为。将==更改为>=可以修复大多数常见用例的这个问题。

阅读更多关于窗户的内容。这里的innerHeight属性

根据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);
}

所有这些解决方案在Firefox和Chrome上都不适用，所以我使用Miles O'Keefe和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!");
    }
});

(2021) 这里的很多答案都涉及到一个元素的引用，但如果你只关心整个页面，只需使用:

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

TL; diana;

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

概念

在其核心，“已经滚动到底部”指的是可滚动区域(scrollHeight)减去可见内容到顶部(scrollTop)的距离等于可见内容的高度(clientHeight)的时刻。

换句话说，当这个等价为真时，我们被“滚动”::

scrollHeight - scrollTop - clientHeight === 0

防止舍入错误

但是，如上所述，其中一些属性是四舍五入的，这意味着在scrollTop有小数组件或四舍五入值对齐不好的情况下，相等性可能会失败。

通过将绝对差异与可容忍的阈值进行比较，可以缓解这个问题:

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

防止舍入错误的代码片段如下所示:

. getelementbyid(“constrained-container”)。addEventListener('scroll'， event => { const {scrollHeight, scrollTop, clientHeight} = event.target; 如果(数学。abs(scrollHeight - clientHeight - scrollTop) < 1) { console.log(滚动); ｝ })； # constrained-container { 身高:150 px; overflow-y:滚动; ｝ # very-long-content { 身高:600 px; ｝ < div id = " constrained-container " > < div id = " very-long-content " > 把我滚动到底部 < / div > < / div >

注意，我添加了一个div，对于它的容器来说，它太大了，无法强制滚动，但没有必要将内容“包装”到另一个元素中，直接在元素中输入文本会使元素溢出。

跳脱，延迟和节流

我对它了解得越多，我发现它在这个答案的范围内就越少(这个codereview问题及其答案，以及这篇链接的文章都很有趣)，但在特定情况下(如果处理程序执行昂贵的计算，如果我们将动画绑定到滚动事件，如果我们只想在滚动运动结束时启动事件，或者任何可能保证它的情况)，它可以用于:

Debounce(当第一次滚动发生时触发处理程序，然后防止它太快触发)， 延迟(阻止处理程序的执行，直到滚动事件在一段时间内没有触发。这在Ecmascript上下文中通常被称为deboning)， 或者节流(防止训练者在一段时间内射击一次以上)。

在选择做这些事情时必须非常小心，例如，限制事件可以防止最后一个卷轴发射，这可能会完全击败无限卷轴。

大多数时候，不做这三件事中的任何一件都是完美的，因为仅仅看看我们是否完全滚动是相对便宜的。