[jQuery]判断页面是否滚动到底部
方法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]判断页面是否滚动到底部的更多相关文章
- vue 判断页面是否滚动到底部
需求 要求用户阅读完本页所有内容后,下一步按钮才可以点击. 实现思路 通过判断当前页面是否到达底部来设置按钮的点击事件. 要判断当前页面是否到达底部需要用到三个距离--距离顶部的距离scrollTop ...
- jQuery 判断页面上下滚动
var t = 0, b = 0; $(window).scroll(function(){ t = $(this).scrollTop(); if(b < t){ console.log('向 ...
- jQuery判断页面滚动条滚动方向
废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery判断页面滚动条(scroll)是上滚还是下滚
单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- jquery判断页面是否滑动到最底部
// 滚动到底部,向下的箭头消失 var $down = $('.down'); var $window = $(window); var $document = $(document); $wind ...
- js 判断浏览器是否滚动到底部
//jquery 实现代码 $(document).height() == $(window).height() + $(window).scrollTop() 1 整个空间的高度 包含(滚动条距离顶 ...
- jQuery 判断页面元素是否存在的代码
在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
- jquery判断页面元素是否存在
在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...
随机推荐
- Java基础篇——多线程
创建线程的三种方式 1.继承Thread类 2.实现Runnable接口 3.实现Callable接口 继承Thread类 public Test extends Thread{ public voi ...
- 又一重要进展发布!OpenMMLab算法仓支持昇腾AI训练加速
摘要:上海人工智能实验室的浦视开源算法体系(OpenMMLab)团队基于昇腾AI发布了MMDeploy 0.10.0版本,该版本已支持OpenMMLab算法仓库在昇腾异构计算架构CANN上的推理部署. ...
- C#开发PACS医学影像三维重建(十四):基于能量模型算法将曲面牙床展开至二维平面
在医学影像领域中,将三维重建中的人体组织展开平铺至二维,用来研判病灶和制定治疗方案的重要手段之一, 它能够将立体曲面所包含的信息更为直观的展示到二维平面上,常用的情景包括: 牙床全景图.平铺血管.骨骼 ...
- Docker容器使用 (入门到精通)
Docker容器 CentOS安装Docker Docker 分为 CE 和 EE 两大版本.CE 即社区版(免费,支持周期 7 个月),EE 即企业版,强调安全,付费使用,支持周期 24 个月. D ...
- 可迭代对象和迭代器对象以及for循环的本质
目录 一.可迭代对象 二.迭代器对象 迭代器介绍: 迭代器对象: 迭代器对象的作用 迭代器对象实操: 注意事项 三.for循环的本质 一.可迭代对象 之前我们对于for循环为什么可以遍历没有做具体解释 ...
- 【安全】漏洞复现及修复——CVE-2023-24055 keepass触发器注入获取明文密码
write by homelander 如要转载请注明出处谢谢:https://www.cnblogs.com/vitalemontea/p/17104168.html 1.前言 [仅供学习使用,切勿 ...
- GaussDB(DWS)现网案例:collation报错
摘要:用户创建hash分布表,使用pbe方式执行使用分布列作为查询条件的语句时报错 本文分享自华为云社区<GaussDB(DWS)现网案例之collation报错>,作者: 你是猴子请来的 ...
- 插入排序(CSP-J 2021 T2)
题目:(由于题干过长直接上链接:P7910 [CSP-J 2021] 插入排序 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)) 不是打广告 又有一个新思路: 我们可以再开一个b数组 ...
- 多功能游戏工具箱 - Watt Toolkit V4.4
Watt Toolkit Watt Toolkit 工具箱能够让 Steam 平台的玩家们享受更加出色的游戏体验,工具箱包含多种实用的功能,支持快速切换登录账号,玩家还可以通过这款工具编辑 Steam ...
- Elasticsearch Mapping类型修改
背景 通常数据库进行分库分表后,目前比较常规的作法,是通过将数据异构到Elasticsearch来提供分页列表查询服务:在创建Elasticsearch索引时,基本都是会参考目前的业务需求.关系数据库 ...