检查用户是否已滚动到底部

JavaScript

前端SamTom

2020-03-11

我正在创建一个分页系统(类似于Facebook),当用户滚动到底部时会加载内容。我想最好的方法是找到用户何时位于页面底部,并运行ajax查询以加载更多帖子。

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

我需要找到一种方法来检查用户何时使用jQuery滚动到页面底部。

第768篇《检查用户是否已滚动到底部》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
ItachiMandy 2020.03.11

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

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

如果您致电,则Chrome浏览器会显示整个页面的高度 $(window).height()

而是使用window.innerHeight来获取窗口的高度。必要的检查应为:

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

停止重复提醒尼克的回答

ScrollActivate();

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

让我展示没有JQuery的方法。简单的JS功能:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

简短示例如何使用它:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }
Pro乐 2020.03.11

当检查可滚动元素(即不是window时,这将提供准确的结果

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

offsetHeight应该给出元素实际可见高度(包括填充,边距滚动条),并且scrollHeight元素整个高度,包括不可见(溢出)区域。

jQuery.outerHeight()结果应该与JS相似-MDN中的.offsetHeight文档offsetHeight尚不清楚其跨浏览器的支持。为了涵盖更多选项,此方法更加完整:

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

L番长 2020.03.11

尼克的回答很好,但是您将具有在滚动时会重复播放自身的功能,或者如果用户缩放了窗口则根本无法使用。我想出了一个简单的解决方法,只是math.round的第一个高度,它按假设的方式工作。

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

如果滚动到最底端,请尝试此匹配条件

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

    //code for your custom logic

}
GO西门 2020.03.11
var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

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

江山如画 2020.03.11

请检查这个答案

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

您可以footerHeight - document.body.offsetHeight查看是在页脚附近还是到达页脚

さ恋旧る 2020.03.11

这是一个相当简单的方法:

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) //User has scrolled to the bottom of the element
}
Davaid阳光伽罗 2020.03.11

尼克·克雷弗(Nick Craver)的答案需要稍做修改才能在iOS 6 Safari Mobile上运行,并且应为:

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

更改$(窗口).height()window.innerHeight应该做的事,因为当地址栏被隐藏额外的60像素被添加到窗口的高度,但使用$(window).height()没有反映这种变化,同时使用window.innerHeight呢。

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

此处详细了解该window.innerHeight物业

LEY米亚 2020.03.11

尼克·克雷弗(Nick Craver)的答案很好,避免了$(document).height()浏览器的价值不同的问题

要使其在所有浏览器上均可使用,请使用James Padolsey的以下功能

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!");
       }
   });

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android