方法1:判断可见高度+滚动高度是否等于内容高度

但经过测试UC、QQ、华为浏览器,这个方法不生效。(打印查因:可能由于屏幕缩放,可见高度和滚动高度会偏小。

    $(this).scroll(function () {
var viewHeight = document.body.clientHeight; //可见高度
var contentHeight = $(".container").get(0).scrollHeight //内容高度
var scrollHeight = $(this).scrollTop(); //滚动高度
if (viewHeight + scrollHeight >= contentHeight) {
alert("到达底部了");
}
})

方法2:在页面底部放一个小div,然后判断这个div是否可见。

    var isElementInViewport = function() {
var doc = document.documentElement
return function isElementInViewport(el) {
// 获取元素是否在可视区域
var rect = el.getBoundingClientRect();
console.log('dom rect', rect)
return (
rect.top >= 0 && rect.left >= 0 &&
rect.bottom <= (window.innerHeight || doc.clientHeight) &&
rect.right <= (window.innerWidth || doc.clientWidth)
);
}
}($('.bottom_div')[0])

[jQuery]判断页面是否滚动到底部的更多相关文章

  1. vue 判断页面是否滚动到底部

    需求 要求用户阅读完本页所有内容后,下一步按钮才可以点击. 实现思路 通过判断当前页面是否到达底部来设置按钮的点击事件. 要判断当前页面是否到达底部需要用到三个距离--距离顶部的距离scrollTop ...

  2. jQuery 判断页面上下滚动

    var t = 0, b = 0; $(window).scroll(function(){ t = $(this).scrollTop(); if(b < t){ console.log('向 ...

  3. jQuery判断页面滚动条滚动方向

    废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...

  4. jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery判断页面滚动条(scroll)是上滚还是下滚

    单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...

  6. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  7. jquery判断页面是否滑动到最底部

    // 滚动到底部,向下的箭头消失 var $down = $('.down'); var $window = $(window); var $document = $(document); $wind ...

  8. js 判断浏览器是否滚动到底部

    //jquery 实现代码 $(document).height() == $(window).height() + $(window).scrollTop() 1 整个空间的高度 包含(滚动条距离顶 ...

  9. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  10. jquery判断页面元素是否存在

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

随机推荐

  1. S2-048 CVE-2017-9791 远程命令执行

    漏洞名称 S2-048 CVE-2017-9791 远程命令执行 利用条件 Struts 2.3.x 开启Struts 1 plugin and Struts 1 action插件 漏洞原理 漏洞产生 ...

  2. 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介

    目录 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境 PY32F0系列上市其实相 ...

  3. 都用过@Autowired,但你知道它是怎么实现的吗

    前言 在使用Spring开发的时候,配置的方式主要有两种,一种是xml的方式,另外一种是 java config的方式.在使用的过程中java config,我们难免会与注解进行各种打交道,其中,我们 ...

  4. Python标准库pathlib及实例操作

    Python标准库pathlib及实例操作 https://docs.python.org/zh-cn/3.9/library/pathlib.html 官网 讲的比较好的文章 https://zhu ...

  5. 【Spring】Bean注册注解

    @Configuration 同@Component,将标注的类作为一个组件,区别是会使用Cglib动态代理,因此使用该注解的类不能是final的 与@Component的区别可见:Configura ...

  6. 基于二叉树的高效IP检索格式MMDB

    一.MMDB简介 MMDB(MaxMind Database) 是MaxMind推出的一个数据存储和检索的数据库格式,用于旗下针对IP检索和存储的Geo产品. IP格式由二进制比特数组组成,很容易想到 ...

  7. C++练习12 字符串成员函数的使用

    1 #include <iostream> 2 #include <string> 3 using namespace std; 4 int main() 5 { 6 stri ...

  8. Spring(Spring的读取外部资源- p 命名空间)

    Spring读取外部资源 实际开发中,数据库的资源一般会单独保存起来.一般会保存到后缀为properties的文件中,方便维护和修改,如果Spring加载资源,就需要在spring.xml中读取pro ...

  9. K3S系列文章-使用AutoK3s在腾讯云上安装高可用K3S集群

    开篇 <K3s 系列文章> <Rancher 系列文章> 方案 在腾讯云上安装 K3S 后续会在这套 K3S 集群上安装 Rancher 方案目标 高可用 3 台master ...

  10. 组织炎症水平高的RA患者接受TNF拮抗剂治疗的效果更好

    组织炎症水平高的RA患者接受TNF拮抗剂治疗的效果更好van der Pouw Kraan TC, et al. Ann Rheum Dis. 2008;67(4):563-6.目的:不同患者对TNF ...