js检测页面触底
<script>
function getDocumentTop() {
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop;
}
function getWindowHeight() {
var windowHeight = 0; if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
function getScrollHeight() {
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight;
}
window.onscroll = function () {
if(getScrollHeight() == getWindowHeight() + getDocumentTop()){
console.log('bottom');
}
}
</script>
1
js检测页面触底的更多相关文章
- 前端 | 页面触底自动加载 Vue 组件
不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...
- 如何使用 js 检测页面上全局变量
如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...
- 用JS检测页面加载的不同阶段状态
这可以通过用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == “complete”判断是否加载完成. 可以采用2个div ...
- js检测页面上一个元素是否已经滚动到了屏幕的可视区域内
应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...
- js 检测页面刷新或关闭
window.onbeforeunload=function(){ //要提交的内容 return "随意写";//必须有return ,不然只有ie有效,chrome无效 }
- js检测页面离开
window.location = 'yjk://app.h5.ihaozhuo.com?page=livetrailer&videoLiveId=' + parseInt(this.Requ ...
- 使用js检测页面是在electron app中运行还是在浏览器中运行
<script type="text/javascript"> var userAgent = navigator.userAgent.toLowerCase() ){ ...
- JS实现滚动区域触底事件
效果 贴上效果展示: 实现思路 样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto 来实现. 接下来看看js方面的实现,其实也很简单,触发的条件是: 可视高度 + 滚动距离 ...
- 微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题
在项目开发中遇到一个关于scroll-view的的问题,具体如下: 项目要求是横向滚动,由于直接在scroll-view组件设置display:flex不生效,因此考虑直接在scroll-view下增 ...
随机推荐
- WPF 数据绑定,界面刷新的两种方法-----INotifyPropertyChanged
.Netformwork4.0及以下版本 -------INotifyPropertyChanged 命名空间: System.ComponentModel 后台代码 public partial c ...
- 小端存储转大端存储 & 大端存储转小端存储
1.socket编程常用的相关函数:htons.htonl.ntohs.ntohl h:host n:network s:string l:long 2.基本数据类型,2字节,4字 ...
- stop容器,把信号量传给java进程,优雅退出
Java中可以添加ShutdownHook监听关闭事件,包括kill -15, control+c,terminal等信号.kill -9则接收不到. Runtime.getRuntime().add ...
- 京东联盟开发(6)——推广链接解析SKUID
1.从推广方案中分析出价格及推广码 $keyword = " [京东]长虹(CHANGHONG) L3 老人手机 移动/联通2G 老年机 双卡双待 咖啡 原价:168.00元 券后价:163 ...
- c# winform禁止窗口多开
static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static vo ...
- 《Linux就该这么学》培训笔记_ch05_用户身份与文件权限
<Linux就该这么学>培训笔记_ch05_用户身份与文件权限 文章最后会post上书本的笔记照片. 文章主要内容: 用户身份与能力 文件权限与归属 文件的特殊权限 文件的隐藏属性 文件访 ...
- 日志篇 随着win10更新...
随着win10更新到最新..我发现电脑出了点状况.. 一 是电脑睡眠主机不关闭...然后用了 https://jingyan.baidu.com/article/cb5d6105d76343005c2 ...
- Pycharm 个人认为舒服漂亮又好用的主题风格
又开始和code打交道了系列…… 实验室换了新电脑,故而,重新安装了各种软件,乃至重新配置 Pycharm主题,找了好久,终于找到,想着应该mark一下,以备下次需要. 个人认为 Monokai 这 ...
- [转帖]如何获得一个Oracle RAC数据库(从Github - oracle/vagrant-boxes) --- 暂时未测试成功 公司网络太差了..
如何获得一个Oracle RAC数据库(从Github - oracle/vagrant-boxes) 2019-11-20 16:40:36 dingdingfish 阅读数 5更多 分类专栏: 如 ...
- APUE之第5章——标准I/O库
一.知识回顾:文件I/O 文件 I/O 是不带缓冲的 I/O(unbuffered I/O),指每个 read 和 write 都调用内核中的一个系统调用. 对于内核而言,所有打开的文件都通过文件描述 ...