方法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. org.apache.catalina.startup.HostConfig.deployWAR Error deploying web application archive

    昨天23点给一个老项目改完打包发布到云服务器后报错,Tomcat9 启动不了,白折腾了我几个小时. 这错误以前遇到过,由于太过久远已经忘记,特此记录 错误日志 22-Dec-2021 23:52:18 ...

  2. Spring MVC学习(一) Spring MVC基本介绍以及配置

    Spring MVC学习(一) Spring MVC基本介绍以及配置   摘要:这篇笔记是对于Spring MVC的第一部分的学习中的整理,主要记录了Spring MVC的基础知识以及配置一个简单的S ...

  3. P1848 [USACO12OPEN]Bookshelf G

    简要题意 给你 \(N\) 本书 \((h_i,w_i)\),你要将书分成任意段(顺序不能改变),使得每一段 \(j\) 中 \(\sum\limits_{i \in j} w_i \leq L\), ...

  4. 图文并茂学习记录--从零开始进行微信小程序开发+引入Vant Weapp组件

    新建项目 创建页面 让人崩溃的东西来了 经过研究,发现这个图标不可以放在二级,只能一级 项目初始化 引入VANT组件库 文档地址:https://youzan.github.io/vant-weapp ...

  5. 分布式协议与算法-Quorum NWR

    1.强一致性与最终一致性 1.1强一致性 强一致性能保证写操作完成后,任何后续访问都能读到更新后的值:强一致性可以保证从库有与主库一致的数据.如果主库突然宕机,我们仍可以保证数据完整.但如果从库宕机或 ...

  6. jmeter性能监控

    jmeter监控内存,CPU等方法 (2018-06-26 15:39:37) 转载▼   分类: 性能测试 方法1:使用插件来监控CPU,内存等的使用情况1.需要的插件准备JMeterPlugins ...

  7. mysql 5.7安装教程及密码设置

    1.安装网址 https://dev.mysql.com/downloads/mysql/ 2.点击 Archives 3.切换版本,之前安装过新版本出现过很多问题,为了方便学习,所以选择了5.7这个 ...

  8. 9月21日内容总结——计算机基础知识、typora软件的安装与软件内的部分markdown语法

    今日内容总结 目录 今日内容总结 一.路径 1.绝对路径 2.相对路径 二.计算机的本质 三.计算机的五大组成部分 1.控制器 2.运算器 PS:CPU=控制器+运算器 3.存储设备 4.输入设备 5 ...

  9. 【unity萌新第一步】Unity的Hello World(适合小白)

    Unity萌新的第一步:使用unity写第一个Hello World IT界有个笑话:"我擅长用各种语言写Hello World".我讲这个笑话的目的是,指出:写一个HelloWo ...

  10. MySQL 中的事务理解

    MySQL 中的事务 前言 原子性 一致性 持久性 并发事务存在的问题 脏读 幻读 不可重复读 隔离性 事务的隔离级别 事务隔离是如何实现 可重复读 和 读提交 串行化 读未提交 可重复读解决了幻读吗 ...