1 function getScrollTop(){
 2                 var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
 3                 if(document.body){
 4                 bodyScrollTop = document.body.scrollTop;
 5               }
 6               if(document.documentElement){
 7                 documentScrollTop = document.documentElement.scrollTop;
 8               }
 9               scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
10               return scrollTop;
11             }
12             //文档的总高度
13             function getScrollHeight(){
14                 var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
15                 if(document.body){
16                 bodyScrollHeight = document.body.scrollHeight;
17               }
18               if(document.documentElement){
19                 documentScrollHeight = document.documentElement.scrollHeight;
20               }
21               scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
22               return scrollHeight;
23             }
24             //浏览器视口的高度
25             function getWindowHeight(){
26                 var windowHeight = 0;
27               if(document.compatMode == "CSS1Compat"){
28                 windowHeight = document.documentElement.clientHeight;
29               }else{
30                 windowHeight = document.body.clientHeight;
31               }
32               return windowHeight;
33             }
34             //监听滚动条的事件内容
35             window.onscroll = function(){
36               if(getScrollTop() + getWindowHeight() == getScrollHeight()){
37                     console.log("getScrollTop:"+getScrollTop()+"**getWindowHeight:"+getWindowHeight()+"**getScrollHeight:"+getScrollHeight())
38               }
39             };

转载于:https://www.cnblogs.com/Salicejy/p/10839536.html

监听是否到达页面滑动的可视区域最底部相关推荐

  1. js 监听 安卓事件_百行代码实现js事件监听实现跨页面数据传输

    百行代码实现js事件监听实现跨页面数据传输 使用场景 类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息 技术原理 跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...

  2. jquery监听向上向下滑动,滑动执行操作

    jquery监听向上向下滑动,滑动执行操作 // 滚动之前 var beforeScrollTop = $(window).scrollTop(); $(window).on("scroll ...

  3. js监听浏览器tab页面变化

    js监听浏览器tab页面变化 引言 今天写到一个需求,当用户离开当前页面的时候,需要关闭页面的一个功能,查找资料发现了这个指令,个人觉得很有用,记录下来... 直接上代码 mounted:(){thi ...

  4. 监听用户在页面停留的时长 / 监听多个页面时长

    1.监听用户在页面停留的时长 2.如果要监听多个页面的时间,并且返回上一页累加上次浏览的时间功能 //记录阅读任务阅读列表recordTaskList() {this.quit_time = 0;le ...

  5. android 界面切换监听,Android切换页面--setContentView

    setContentView 一般切换页面,通过Intent,startActivity可以实现,但系统创建Activity是非常耗时的,如果对切换画面时间有要求,只能用setContentView在 ...

  6. 监听列表ListVIew的滑动状态

    /*监听列表的滑动状态:暂时用不到* SCROLL_STATE_FLING 时让图片不显示,提高滚动性能让滚动小姑更平滑* SCROLL_STATE_IDLE 时显示当前屏幕可见的图片*/mListV ...

  7. 微信小程序实现watch监听,无需页面引入!!!

    目录 1监听函数实现 2.页面Page重写(实现无需引入) 3完整代码实现 4微信小程序代码片段 大家都知道小程序其实和Vue的写法以及原理都存在很大的相同,但是里有watch监听可以监听data定义 ...

  8. javascript解析印象笔记导出enex文件(javascript解析xml,javascript监听手机端手指滑动事件)

    今晚又是在单位值班,最近看小说在印象笔记记了几百条零散的笔记,在印象笔记app上看要一条一条点开,今天把笔记导出来尝试着用js解析它,把一条条笔记转化为一张张小卡片,像刷抖音那样滑动着看,于是就用js ...

  9. window.open 打开vue路由,并监听页面关闭事件,监听子父页面消息传递

    name:路由 query:传递参数 const page2 = this.$router.resolve({name:'addHs',query:{hsCode:row.hsCode}}); var ...

最新文章

  1. 人脸妆容迁移---研究和思考
  2. 机器人的兴起:洞察2020全球机器人市场【Part 1】
  3. 第三讲,我们来谈谈:“二进制的负数”
  4. unity3d 自动变化大小_【Unity游戏开发】AB学习(三)--加载AB和实例化操作对应的内存变化...
  5. 危险!!!也许你的web网站或服务正在悄无声息地被SQL注入
  6. git merge与rebase
  7. mysql 半同步 主主_MySQL主从,半同步,主主复制
  8. x64位windows上程序开发的注意事项
  9. mysql中多个left join子查询写法以及别名用法
  10. pr 无法启动因为计算机丢失,pramtlib.dll_“PR打不开,因为计算机丢失TimeWarpFilter.dll”是怎么回事?怎么办啊?_prccamtlib.dll...
  11. matlab求阶乘函数的代码,matlab阶乘
  12. HTML里img标签里的alt属性解释
  13. Pygame小游戏:玩扫雷就在瞎点的,不止你一个人。
  14. 程序员视角:鹿晗公布恋情是如何把微博搞炸的?
  15. 笔记本电脑清除BIOS密码
  16. Win XP系统无法关机时如何强制软关机
  17. QGIS学习资料及地理数据下载
  18. python3如何下载模块
  19. 分布式事务框架Seata的使用
  20. 盒子模型(插入图片,外边距,内边距)

热门文章

  1. layui 按钮点击一次后失效_electron-vue自定义边框后点击事件失效问题
  2. Spring mvc @SessionAttribute
  3. python FastDFS
  4. 16 The Terminal and Job Control
  5. scrapy.response
  6. Java基础学习总结(165)——API 安全最佳实践
  7. Tomcat学习总结(10)——Tomcat多实例冗余部署
  8. oracle 调用main方法,main方法中调用spring注入bean
  9. linux系统故障排除
  10. 10用户账户控制只有否_【新书连载】测试工程师核心开发技术(10)—数据库体系结构...