方法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. Windows 平台计算 CPU 总利用率

    利用 GetSystemTimes 可以获得 Windows 系统的 Idle Time. Kernel Time 和 User Time.Idle Time 是系统空闲的时间,也就是系统没有利用的时 ...

  2. 就dispatch_source_t写的计时器

    直接上干货,我这里用的是Xcode12.4,macOS:11.2.3 OC版本:               swift版本:        

  3. python3进行3des的加密解密

    #秘钥长度正常24位,16位补齐第一个八位 import pyDes import base64 print('=======key1=======') keys='1234567890123456' ...

  4. Unity之GPS定位(高德解析)

    Unity之GPS定位 Unity之GPS定位(高德解析) 前言 开篇 Unity版本及使用插件 正题 创建场景 写脚本 把脚本挂载到场景中 打包发布场景 安装真机并且测试 代码中的==Key==怎么 ...

  5. 如何在阿里云服务器搭建flask

    下载flask不用我多说了,pip3 install flask 今天在阿里云的服务器上测试一个Flask程序,命名指定了 ip:0.0.0.0,port:5000,但是外网IP确怎么也访问不了网页 ...

  6. 在 MBP(Apple M1 Pro)上捣鼓友善 nanoPi R5S——【一、构建 rkdeveloptool】

    在种草了很多天之后,最近终于在淘宝下单了友善 nanoPi R5S. 选择友善 nanoPi R5S 有两点主要理由: 1. 自带 EMMC 存储,可以使用 RockChip 提供的 MaskRom ...

  7. drf-day2——restful规范、序列化反序列化、基于django编写五个原生接口、drf介绍和快速使用、cbv源码分析

    目录 一.restful规范(重要,不难) 概念 十个规范 二.序列化反序列化 三.基于django原生编写5个接口 四.drf介绍和快速使用 概念 安装 代码 五.cbv源码分析 六.作业 1.使用 ...

  8. Kubernetes环境cert-manager部署与应用

    本作品由Galen Suen采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可.由原作者转载自个人站点. 概述 本文用于整理基于Kubernetes环境的cert-manager部 ...

  9. springcloud微服务搭建demo

    软件 版本 IDEA 2022.3.1 <兼容maven 3.8.1及之前的所用版本> JDK 1.8_64 Maven 3.8.2 本demo只使用了服务发现与注册.Feign调用及负载 ...

  10. P3_注册小程序账号&安装开发者工具

    注册小程序账号 点击注册按钮 使用浏览器打开 https://mp.weixin.qq.com/ 网址,点击右上角的"立即注册"即可进入到小程序开发账号的注册流程,主要流程截图如下 ...