<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. ESA2GJK1DH1K升级篇: 移植远程更新程序到STM32F103RET6型号的单片机,基于(GPRS模块AT指令TCP透传方式)

    前言 上节实现远程更新是更新的STM32F103C8T6的单片机 GPRS网络(Air202/SIM800)升级STM32: 测试STM32远程乒乓升级,基于(GPRS模块AT指令TCP透传方式),定 ...

  2. git手册查询

    1.创建版本库 通过git init命令把此目录变成Git可以管理的仓库; 添加文件到Git仓库,分两步 第一步:git add <file>,注意,可反复多次使用,添加多个文件:例如 g ...

  3. Android Studio 之 Navigation【2.数据的传递】

    Android Studio 之 Navigation[2.数据的传递和过渡动画] 在资源navigation资源的xml文件中,在[目标界面] detialFragment中点击,在右边 Argum ...

  4. IntelliJ IDEA 2019.2已经可以利用补丁永久破解激活了(持续更新)

    前面的文章中,一直在强调2019系列的idea无法使用补丁进行永久激活,但是最近发现,已经有大佬可以利用补丁将idea 2019.2及以下版本激活到2089年了,而且还不用改hosts,实在是佩服,不 ...

  5. 几句话总结一个算法之CTR预估模型

    背景 假设现在有个商品点击预测的任务,有用户端特征性别.年龄.消费力等,商品侧特征价格.销量等,样本为0或者1,现在对特征进行one hot encode,如性别特征用二维表示,男为[1,0],女为[ ...

  6. NIO (一) NIO是什么

    参考文档:java为什么需要NIO:https://liuchi.coding.me/2017/08/01/浅谈Java为什么需要NIO/美团技术团队 NIO浅析:https://tech.meitu ...

  7. jenkins更新为国内源

    系统管理->插件管理->高级->升级站点->URL https://jenkins-zh.gitee.io/update-center-mirror/tsinghua/upda ...

  8. Redis NOAUTH Authentication required

    redis设置密码后停止服务报错,NOAUTH Authentication required 可以修改/etc/init.d/redis文件中的stop命令 $CLIEXEC -p $REDISPO ...

  9. 用Python 绘制分布(折线)图

    用Python 绘制分布(折线)图,使用的是 plot()函数. 一个简单的例子: # encoding=utf-8 import matplotlib.pyplot as plt from pyla ...

  10. C语言向txt文件写入当前系统时间(Log)

    程序实现很简单,涉及到的只有两个知识点. 1.文件最最基本的打开关闭: 2.系统时间的获取. 代码是在VS2019环境下编写的,部分函数在其他编译器中会无法识别.这个就只能需要自己去查找对应的函数简单 ...