两种监听页面滚动的方法

一、原生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. Android学习记录(8)—Activity的四种加载模式及有关Activity横竖屏切换的问题

    Activity有四种加载模式:standard(默认), singleTop, singleTask和 singleInstance.以下逐一举例说明他们的区别: standard:Activity ...

  2. 转载: keepalived工作原理和配置说明

    转自:http://outofmemory.cn/wiki/keepalived-configuration keepalived是什么 keepalived是集群管理中保证集群高可用的一个服务软件, ...

  3. 解决ubuntu发热严重的问题

    对于双显卡PC安装ubuntu ,风扇狂转,发热严重,原因基本双显卡的优化导致. 解决具体步骤如下: 命令行输入sudo apt-get install bumblebee bumblebee-nvi ...

  4. 百度webuploader上传 1

    百度webupload网址:http://fex.baidu.com/webuploader/ 引入js和css <script src="../../Content/webuploa ...

  5. 设置hostname

    由于 http://1.2.3.4 不是一个有效的 apt 源,安装肯定会失败,我们可以在 /var/log/cloud-init.log 看到失败的信息. cloud-init 默认会将 insta ...

  6. sdram之乒乓操作

    在实时显示时,为了保证画面显示的完整性需要对SDRAM进行乒乓操作. SDRAM 中有 4 个bank ,地址分别为00 01 10 11,后面将用 0 1 2 3来描述 bank 0和1 作为第一个 ...

  7. Java TCP通信概念及实例

    TCP/UDP 协议 通俗解释: TCP协议和UDP协议的区别类似于电话系统和邮政系统. <1>TCP:类似于电话系统,建立双向的通信通道,确定连接,话音顺序接听. <2>UD ...

  8. hadoop生态圈列式存储系统--kudu介绍及安装配置

    介绍 Kudu 是一个针对 Apache Hadoop 平台而开发的列式存储管理器.Kudu 共享 Hadoop 生态系统应用的常见技术特性: 它在 commodity hardware(商品硬件)上 ...

  9. P3531 [POI2012]LIT-Letters

    题目描述 Little Johnny has a very long surname. Yet he is not the only such person in his milieu. As it ...

  10. DP———3.最长上升子序列的和

    Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very popular in HDU. May ...