<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检测页面触底的更多相关文章

  1. 前端 | 页面触底自动加载 Vue 组件

    不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...

  2. 如何使用 js 检测页面上全局变量

    如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...

  3. 用JS检测页面加载的不同阶段状态

    这可以通过用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == “complete”判断是否加载完成. 可以采用2个div ...

  4. js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

    应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...

  5. js 检测页面刷新或关闭

    window.onbeforeunload=function(){ //要提交的内容 return "随意写";//必须有return ,不然只有ie有效,chrome无效 }

  6. js检测页面离开

    window.location = 'yjk://app.h5.ihaozhuo.com?page=livetrailer&videoLiveId=' + parseInt(this.Requ ...

  7. 使用js检测页面是在electron app中运行还是在浏览器中运行

    <script type="text/javascript"> var userAgent = navigator.userAgent.toLowerCase() ){ ...

  8. JS实现滚动区域触底事件

    效果 贴上效果展示: 实现思路 样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto 来实现. 接下来看看js方面的实现,其实也很简单,触发的条件是: 可视高度 + 滚动距离 ...

  9. 微信小程序---scroll-view在苹果手机上触底或触顶页面闪动问题

    在项目开发中遇到一个关于scroll-view的的问题,具体如下: 项目要求是横向滚动,由于直接在scroll-view组件设置display:flex不生效,因此考虑直接在scroll-view下增 ...

随机推荐

  1. 几个golang 静态资源嵌入包

    静态资源嵌入二进制文件中,可以方便我们的软件分发(只需要简单的二进制文件就可以了),目前大部分golang 的 web 应用都是使用类似的方法. 以下是收集到的一些常见方案 github.com/go ...

  2. Chrome DevTools的使用

    一.Chrome DevTools 简介 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析 手册:Chrome 开发者工具中文手 ...

  3. redis缓存, 缓存击穿,缓存雪崩,缓存穿透

    在实际项目中,MySQL数据库服务器有时会位于另外一台主机,需要通过网络来访问数据库:即使应用程序与MySQL数据库在同一个主机中,访问MySQL也涉及到磁盘IO操作(MySQL也有一些数据预读技术, ...

  4. Python 的AES加密与解密

    AES加密方式有五种:ECB, CBC, CTR, CFB, OFB 从安全性角度推荐CBC加密方法,本文介绍了CBC,ECB两种加密方法的python实现 python 在 Windows下使用AE ...

  5. 记录VUE-CLI项目创建及初始化相关

    记录 创建项目 vue init webpack 项目名 配置config下的index.js的文件配置,修改相对路径和配置不打包map文件 修改build-webpack.base.conf.js, ...

  6. 微信小程序跳转函数总结

    微信小程序跳转函数总结 ​ 笔者在微信小程序前端的开发过程中,在不同的情况下遇到了需要使用不同的页面跳转逻辑的情况,以下是我对这些函数的使用场景的一个总结介绍. wx.navigateTo 这是最常用 ...

  7. 第一周第二部分 coursera.org

    即使J(,)=,也不能是完美估计,因为其他数据可能存在误差 取任何颜色并沿着“圆”走,就可以得到相同的成本函数值,右图三个点的J(,)相同 越靠近圆心,J(,)越小 梯度下降算法可以将代价函数J()最 ...

  8. Linux命令中service的用法

    用途说明 service命令用于对系统服务进行管理,比如启动(start).停止(stop).重启(restart).查看状态(status)等.相关的命令还包括chkconfig.ntsysv等,c ...

  9. Golang 调用 C/C++,例子式教程

    大部分人学习或者使用某样东西,喜欢在直观上看到动手后的结果,才会有继续下去的兴趣. 前言: Golang 调用 C/C++ 的教程网上很多,就我目前所看到的,个人见解就是比较乱,坑也很多.希望本文能在 ...

  10. play framework + sbt入门之环境搭建

    一 sbt的使用 SBT = (not so) Simple Build Tool,是scala的构建工具,与java的maven地位相同.其设计宗旨是让简单的项目可以简单的配置,而复杂的项目可以复杂 ...