<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. TCP/IP协议总结

    TCP/IP网络协议栈分为四层, 从下至上依次是: 链路层 其实在链路层下面还有物理层, 指的是电信号的传输方式, 比如常见的双绞线网线, 光纤, 以及早期的同轴电缆等, 物理层的设计决定了电信号传输 ...

  2. 2019 qbxt CSP-S考前冲刺班总结

    似乎--也没有太多好说的. ​ 但这是最后一次培训,因此还是应该写点什么的. ​ 记得状态最好的一次培训,是高一的第一次培训.那次是总共的第二次培训.第一次去的时候什么也不会,跟的非常吃力,每天都在疯 ...

  3. 实验三:Linux进程管理(HDU)

    2.设计内容 把下面的几个网址的内容看懂,关于Linux的通信机制就会有个基本的了解了,后面的这几个代码也应该可以看得懂了. 管道通信:https://blog.csdn.net/ljianhui/a ...

  4. 将行数据转换成Java(POJO)对象

    工作中经常会遇到将行数据转换成Java(POJO)对象的场景,其中关于字段校验和类型转换的处理繁琐而冗余,对于有代码洁癖的人着实不能忍.这里分享下自己封装的工具代码,也许能够帮助你更简单地完成此类任务 ...

  5. python总结五

    1.is和==的区别:官方文档解释:is表示的是对象标识符,而==表示的是相等equal,is的作用是用来检查对象的标识符是否一致,也就是两个对象在内存中的地址是否一样 而==是用来检查两个对象是否相 ...

  6. 模型区分度衡量指标-KS值

    1.KS值--学习器将正例和反例分开的能力,确定最好的“截断点” KS曲线和ROC曲线都用到了TPR,FPR.KS曲线是把TPR和FPR都作为纵坐标,而样本数作为横坐标.但是AUC只评价了模型的整体训 ...

  7. Flume的Source、Sink总结,及常用使用场景

    数据源Source RPC异构流数据交换 Avro Source Thrift Source 文件或目录变化监听 Exec Source Spooling Directory Source Taild ...

  8. Effective.Java第67-77条(异常相关)

    67.  明智审慎地进行优化 有三条优化的格言是每个人都应该知道的: (1)比起其他任何单一的原因(包括盲目的愚钝),很多计算上的过失都被归咎于效率(不一定能实现) (2)不要去计算效率上的一些小小的 ...

  9. vue截取字符串

    1.vue中截取前11位字符串 <li> <span>立案时间:</span> <p>{{jsyd.TIME.substring(0,10)}}< ...

  10. AGC038

    Contest Page 开题开错翻车场.jpg A sol $A > \frac{W}{2}$或者$B > \frac{H}{2}$的时候无解,否则构造方法长下面这样 #include& ...