两种监听页面滚动的方法

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

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

  

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

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

  

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. iOS远程消息推送原理

    1. 什么是远程消息推送? APNs:Apple Push Notification server 苹果推送通知服务苹果的APNs允许设备和苹果的推送通知服务器保持连接,支持开发者推送消息给用户设备对 ...

  2. php静态文件返回304

    有时一些静态文件(如图片)会由php输出,会发现请求都是200,静态文件每次都去服务器上请求太浪费资源了,这时如何让浏览器缓存图片呢?就需要我们在php中输出304了. 我们可以利用php中的 HTT ...

  3. Docker私有仓库Harbor部署与使用

    一.harbor介绍 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器. 由下面几个组件组成: proxy:nginx前端代理,主要是分发前端页面ui访问和镜像上传和下载 ...

  4. python学习总结---函数使用 and 生成器

    # 函数使用 ### 生成器 - 使用场景 在使用列表时,很多时候我们不会一下子使用全部数据,通常都是一个一个使用,但是当数据量比较大的时候,定义一个大的列表将会是内容使用突然增大.为了解决此类问题, ...

  5. springboot13 Hikari 和Introspector

    SpringBoot Initializr Introspector(内省) class TestReflect { @Test fun testReflect() { //获取字节码对象 val c ...

  6. hadoop-搭建(转)--亲测好用 (一)

    1)JDK软件 下载地址:http://www.oracle.com/technetwork/java/javase/index.html 2)Hadoop软件 下载地址:http://hadoop. ...

  7. [转]Android的网络与通信

    本文转自:http://www.cnblogs.com/qingblog/archive/2012/06/15/2550735.html 第一部分 Android网络基础   Android平台浏览器 ...

  8. 用Margin还是用Padding?

    用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时 ...

  9. 《c程序设计语言》-2.10 不用if-else 转换大小写

    #include <stdio.h> int lower(char a) { int b; b = (a >= 'A' && a <= 'Z') ? (a - ...

  10. 使用keepalived监控tomcat 达到双机热备

    通常说的双机热备是指两台机器都在运行,但并不是两台机器都同时在提供服务. 当提供服务的一台出现故障的时候,另外一台会马上自动接管并且提供服务,而且切换的时间非常短.下面来以keepalived结合to ...