两种监听页面滚动的方法

一、原生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. Webpack标准配置

    let htmlWebpckPlugin= require('html-webpack-plugin');//该组件能将src下面提定的html文件与打包后在js文件打包在一起module.expor ...

  2. Erlang中常用的类型转换[转]

    转自: http://blog.sina.com.cn/s/blog_53a5047b01018yqv.html 例子 结果 atom_to_list(hello). "hello" ...

  3. win7重装后恢复grub和ubuntu14

    没有光盘和优盘启动盘,可以在win7下安装easybcd,添加一个启动选项为linux grub2,启动后进入ubutnu,执行如下: sudo -i   //取得root权限 fdisk -l    ...

  4. python学习笔记十三:Flask demo

    一.Flask简介 Flask 是一个 Python 实现的 Web 开发微框架.官网:http://flask.pocoo.org/ 二.Demo 1.代码结构 . ├── blog.py ├── ...

  5. js限制文本框只能输入特定字符

    限制只能输入数字 // ---------------------------------------------------------------------- // <summary> ...

  6. Linux下通过tcpdump抓包工具获取信息

    介绍 tcpdump是网络数据包截获分析工具.支持针对网络层.协议.主机.网络或端口的过滤.并提供and.or.not等逻辑语句帮助去除无用的信息. tcpdump - dump traffic on ...

  7. Entity Framework(一)

    相关知识点复习: 1.var 类型推断: var p=new Person(); 2.匿名类型: var a=new {Name="wang",Age=12  }; 3.给新创建的 ...

  8. rownum浅谈(二)

    上篇说到rownum和order by及索引列的关系,明白了通过构建一个子查询把查询结果固定住再取数就可以了 .还是取最近10条创建的用户: select * from (select u.* fro ...

  9. ocrosoft Contest1316 - 信奥编程之路~~~~~第三关 问题 E: IQ(iq)

    http://acm.ocrosoft.com/problem.php?cid=1316&pid=4 题目描述 根据世界某权威学会的一项调查,学信息学的学生IQ非常高.举个最好的例子,如果我们 ...

  10. 再看数据库——(5)Group By与Order By

    在使用sql语句时,很多人都会分不清order by与group by,其实简单的说: order by -- 排序 group by --分组 1.order by是行的排序,默认为升序. 有两种方 ...