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下增 ...
随机推荐
- HashMap和HashTable本质性的区别
一,HashMap 1.HashMap是键值对key-value形式双列集合.它的底层存储原理是哈希表. 2.对应HashMap采用哈希表存储键值对元素的方式. HashMap.put(key,val ...
- SDSC 2018 day2解题报告
目录 10.12考试总结 T1 最近公共祖先 错误原因 T2 即时战略 T3 欧皇 10.12考试总结 T1 最近公共祖先 预估得分: 100 实际得分: 20 最大得分: 100 用时:1小时10分 ...
- 三天精通Vue--ES6的常用语法
详细学习请参考 阮一峰的ECMAScript 6 入门 let和const的使⽤ es5中使用var来声明全局变量 es5中我们学习了使用var来声明变量,但是使用var声明变量,会存在变量提升的问 ...
- No module named 'requests_toolbelt'
pip install requests-toolbelt
- 第02组 Alpha冲刺(1/6)
队名:無駄無駄 组长博客 作业博客 组员情况 张越洋 过去两天完成了哪些任务 如何进行团队代码的版本管理 如何使用微信云开发 如何使用管理微信开发团队 接下来的计划 沟通前后端成员,监督.提醒他们尽快 ...
- nuxt或者vue,axios中如何发送多个请求
在使用vue或者nuxt中,我们需要使用axios去发送多个http请求,参考了axios的官方说明你也许会想到使用axios.all发送请求,但是这样可能会出现一些异常错误: (node:9360) ...
- 【C/C++开发】STL内嵌数据类型: value_type
使用stl库的时候一直对value_type这个东西理解的不是很好,可以说就是不理解.今天看了<STL源码剖析>才恍然大悟.这里稍作记录. 每个STL中的类都有value_type这种东西 ...
- Linux常用基础(一)
1.命令解释器 shell---Unix操作系统 bash---Linux操作系统 本质:根据输入的命令,调用相应的执行程序. 2.Linux下的快捷键 (1)命令和路径补全 Tab键 (2)主键盘的 ...
- thinkphp验证码不现实多半是bom惹的祸
thinkphp 验证码不现实多半是bom惹的祸,下面是驱除bom的代码: 链接:https://pan.baidu.com/s/1v5gm7n0L7TGyejCmQrMh2g 提取码:x2p5 免费 ...
- Apache信息头
package org.apache.http; public final class HttpHeaders { public static final String ACCEPT = " ...