两种监听页面滚动的方法

一、原生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. Maven学习 (二) Eclipse 上安装 Maven3插件

    eclipse 安装插件的方式最常见的有两种: 1. 一种是在线安装,这貌似是用的最多的,就是:Help  -->  Install New Software,然后输入 HTTP 地址来安装,但 ...

  2. laravel5.5用户认证

    目录 1. 命令 2. 快速认证 2.1 自定义路径 2.2 自定义用户名 2.3 自定义看守器 2.4 自定义验证/存储 2.5 Auth::xx() 2.6 保护路由 2.7 指定看守器 3 手动 ...

  3. 关于mac ox node安装报 npm ERR! registry error parsing json

    想安装grunt 遇到2个问题 让npm重新设置一下config: npm config set registry http://registry.cnpmjs.org 然后还报 npm ERR! E ...

  4. .Net导出Word和Excel

    using System; using System.Collections.Generic; using System.Linq; using System.Web; public class Ex ...

  5. SpringMVC 集成 Freemarker 模板引擎

    本文通过 maven 项目中集成 1.引入 SpringMVC 与 Freemarker 需要的依赖 <!-- SpringMVC --> <dependency> <g ...

  6. System.Activator类

    public static ObjectHandle CreateInstance(string assemblyName, string typeName); 该类有一个方法. // // 摘要: ...

  7. ubuntu16.04 搭建nexus+maven 学习

    /opt/nexus-2.10.0-02/bin vim nexus 关键配置: RUN_AS_USER=root JAVA_HOME=/usr/lib/java/jre export NEXUS_H ...

  8. composer 库无法提交git

    composer require firebase/php-jwt 安装了该库,想提交到版本库,无论如何也提交不上去,.ignore中也没忽略,网上寻找答案,说有个.git文件夹需要删除 PHPSTO ...

  9. (总结)Nginx使用的php-fpm的两种进程管理方式及优化

    PS:前段时间配置php-fpm的时候,无意中发现原来它还有两种进程管理方式.与Apache类似,它的进程数也是可以根据设置分为动态和静态的. php-fpm目前主要又两个分支,分别对应于php-5. ...

  10. 2016年NK冬季训练赛 民间题解

    A题 水题,考察对行的读入和处理,注意使用long long #include <iostream> #include <cstring> #include <cstdi ...