两种监听页面滚动的方法

一、原生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. 剑指Offer - 九度1366 - 栈的压入、弹出序列

    剑指Offer - 九度1366 - 栈的压入.弹出序列2014-02-05 20:41 题目描述: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所 ...

  2. 《Cracking the Coding Interview》——第13章:C和C++——题目10

    2014-04-25 20:47 题目:分配一个二维数组,尽量减少malloc和free的使用次数,要求能用a[i][j]的方式访问数据. 解法:有篇文章讲了六种new delete二维数组的方式,其 ...

  3. mysql一机多实例安装记录

    因为想研究mycat,所以需要安装多个mysql实例进行研究.限于没有多于计算机,只能在本机安装了.通过mysql文档,自己琢磨着安装成功! 目录结构如下: 其中one和two文件夹用来模拟数据库分库 ...

  4. selenium fluentwait java实例

    本文转自:http://www.programcreek.com/java-api-examples/index.php?api=org.openqa.selenium.support.ui.Flue ...

  5. 如何在乌班图上配置java开发环境

    不想说的那么细,每条命令都说一下,在现在这个浮躁的时代,很少有人能看的下去,我就直接上命令,最简单的快捷的方式. 1:安装软件 2:设置root密码 3:配置mysql远程登录 4:安装java运行环 ...

  6. nodejs下载图片到本地,根据百度图片查找相应的图片,通过nodejs保存到本地文件夹

    根据百度图片查找相应的图片:输入图片关键字,输入图片数量(默认是30条),通过nodejs将批量保存图片到本地文件夹. 代码已上传到github上:代码github的地址 下载后进去back-end: ...

  7. java 继承小结

    [code=java] //多态的经典例子 //向上转型后,父类只能调用子类和父类的共同方法和的重写方法(方法名相同,参数也相同),不能调用重载方法(方法名相同,但参数不同) class A { pu ...

  8. cd,PATH,alias,man,快捷键

    5. cd命令cd 后面不加东西,就是进入到当前用户的家目录cd ~ 这里的~符号也表示用户的家目录cd - 切换到上一次所在的目录cd . .. 其中.表示当前目录, ..表示上一级目录注意区分绝对 ...

  9. DataBase -- Note I

    SQL对大小写不敏感! SQL DML和DDL:可以把SQL分为两个部分:数据操作语言(DML)和数据定义语言(DDL) SQL(结构化查询语言)是用于执行查询的语法.但是SQL语言也包含用于更新.插 ...

  10. 【普通の惨败】GDOI2015卖萌记

    前记:这次可真的全程卖萌了.... Day 0 早早坐上前往广州的火车,然后转车到韶关 然后就到了偏远郊区的(准)四星酒店 周围连路灯都没有,极其僻静极其荒凉 大家都极其安静地回到自己房间复习 这一天 ...