两种监听页面滚动的方法

一、原生js通过window.onscroll监听

window.onscroll = function() {
//为了保证兼容性,这里取两个值,哪个有值取哪一个
//scrollTop就是触发滚轮事件时滚轮的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滚动距离" + scrollTop);
}

  

二、Jquery通过$(window).scroll()监听

$(window).scroll(function() {
//为了保证兼容性,这里取两个值,哪个有值取哪一个
//scrollTop就是触发滚轮事件时滚轮的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滚动距离" + scrollTop);
})

  

js-监听页面滚动的更多相关文章

  1. JS监听页面滚动到底部事件

    废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop( ...

  2. react 监听页面滚动

    html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...

  3. js监听页面放大缩小

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...

  4. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  5. vue 中监听页面滚动

    监听页面滚动 在methods中定义一个方法 handleScroll() { //获取滚动时的高度 let scrollTop = window.pageYOffset || document.do ...

  6. ionic 监听页面滚动,点击停止滚动

    类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchen ...

  7. 原 JQuery监听页面滚动总结

    1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...

  8. JS监听页面关闭

    JS可以监听浏览器页面的关闭,主要使用了window对象的onbeforeunload方法 在以前(旧版本的浏览器中),可以自定义提示文案 window.onbeforeunload = functi ...

  9. JQuery监听页面滚动总结

    1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...

  10. js监听页面是否在浏览器当前页面

    在最近的一个socket项目中,需要监听客户端是否已读客服端发送的消息. 这里用到了html5中document新增了一个事件 visibilitychange,这个事件在页面前台或后台切换时被触发, ...

随机推荐

  1. java编程-无锁初始化

    private final Node<K,V>[] initTable() { Node<K,V>[] tab; int sc; while ((tab = table) == ...

  2. 恢复误删除表黑科技之relay log大法

      Preface       In my previous blogs,I've demonstrated several mothods of how to rescue a dropped ta ...

  3. python之上下文管理、redis的发布订阅、rabbitmq

    使用with打开文件的方式,是调用了上下文管理的功能 #打开文件的两种方法: f = open('a.txt','r') with open('a.txt','r') as f 实现使用with关闭s ...

  4. django ORM中的表关系

    多对一: 为了方便理解,两个表之间使用ForeignKey连接时,使用ForeignKey的字段所在的表为从表,被ForeignKey连接的表为主表. 使用场景:书和出版社之间的关系,一本书只能由一个 ...

  5. Nginx负载均衡的实现(初级)

    不用nginx.conf,新建一个 fzjh.conf (名称自定义) 内容如下: user nobody; # 声明用户为nobody worker_processes 4; # 开启的nginx ...

  6. 【bzoj4719】[Noip2016]天天爱跑步 权值线段树合并

    题目描述 给出一棵n个点的树,以及m次操作,每次操作从起点向终点以每秒一条边的速度移动(初始时刻为0),最后对于每个点询问有多少次操作在经过该点的时刻为某值. 输入 第一行有两个整数N和M .其中N代 ...

  7. 【bzoj1511】[POI2006]OKR-Periods of Words KMP-next数组

    原文地址:http://www.cnblogs.com/GXZlegend/p/6827027.html 题目描述 一个串是有限个小写字符的序列,特别的,一个空序列也可以是一个串. 一个串P是串A的前 ...

  8. poj 2253 Frogger (最短路径)

    Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 22557   Accepted: 7339 Descript ...

  9. 开头什么的肯定要自我介绍然后把它扔到置顶咯>_<~

    大家嚎,我是NanoApe~ 现在高一,是个OIer.音游狗和一个爱着二次元的萌汉子妹子,欢迎前来勾搭>_<~ 最近就是要冲省队啦~~~~加油! 扣扣号:879006461 Weibo:伪 ...

  10. [blockchain-035]eos的部署安装智能合约

    0.参考资料 https://github.com/EOSIO/eos/wiki 1. eos的github地址 https://github.com/EOSIO/eos 2.下载eos源码 git ...