[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(& ...
随机推荐
- python进阶之路5之流程控制(垃圾回收机制)
垃圾回收机制 """ 有一些语言,内存空间的申请和释放都需要程序员自己写代码才可以完成 但是python却不需要 通过垃圾回收机制自动管理 ""&qu ...
- Java学习笔记:2022年1月6日(补充)
Java学习笔记:2022年1月6日(补充) 摘要:这篇笔记主要记录了2022年1月6日下午的笔记,主要内容为Java语言中的基础操作,以及基础知识点,了解这些后基本上就可以使用Java写算法了. ...
- AtCoder Regular Contest 148 B - dp
题面 For a string \(T\) of length \(L\) consisting of d and p, let \(f(T)\) be \(T\) rotated \(180\) d ...
- 广工Anyview【DC02PE97】解析
前言 由于是出成绩后一段时间写的,已经有点遗忘当时遇到的情况,同时该代码不是最优解,需要精简代码的同学可以想想办法解决奇偶长度和有时候头结点不为空的问题,这样就可以极大程度上解决我这个代码的冗余. 题 ...
- 工作这么多年,我总结的数据传输对象 (DTO) 的最佳实践
前言 数据传输对象 (DTO) 是一种设计模式,常用于软件开发不同层或者不同系统之间传输数据.DTO 的主要目的是封装数据并防止它被其他层或系统直接访问或修改.通过遵循一组最佳实践,开发人员可以确保他 ...
- 洛谷P2036 PERKET题解
先来审题,主要有以下几个条件: 酸度求乘积,苦度求和,两者相减的值最小(当然是绝对值). 下面附上AC代码: #include<bits/stdc++.h> //万能头文件 using n ...
- Vue导出模板、使用前端js办法导出表格数据、导入表格前端读取表格数据、导入表格发送后端读取数据
以下是几种用的较多的函数方法,可以参考使用. // 導出1 myExport() { // post請求文件寫法1 const url = 'http://XXXX/XXXX/XXXX/XXXX' c ...
- JDK的下载与安装-环境变量的配置
JDK的下载与安装 环境变量的配置 配置环境变量作用 开发Java程序,需要使用JDK中提供的工具,工具在JDK9安装目录的 bin 目录下. 在DOS命令行下使用这些工具,就要先进入到JDK的bin ...
- Selenium中免登录的实现方法一option
Selenium中免登录的实现方法一option 在selenium中有很多种可以实现网站的免登录,option就是其中的一种做法. 学员在VIP自动化课程中多有涉及. 1. 准备工作 打开一个网站( ...
- ES字段类型
1 String ELasticsearch 5.X之后的字段类型不再支持string,由text和keyword取代,不做说明. 2 text和keyword 2.1 简介 ElasticSearc ...