两种监听页面滚动的方法

一、原生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. HTML标准开头

    <!doctype html> <html>   <head> <meta charset="utf-8"> <title&g ...

  2. centos使用--开机启动

    centos6.8 1.利用 chkconfig 来配置启动级别 在CentOS或者RedHat其他系统下,如果是后面安装的服务,如httpd.mysqld.postfix等,安装后系统默认不会自动启 ...

  3. Windows Server 2012 新特性:IPAM的配置

    Windows Server 2012 中的 IPAM 是一个新增的内置框架,用于发现.监视.审核和管理企业网络上使用的 IP 地址空间.IPAM 可以对运行动态主机配置协议 (DHCP) 和域名服务 ...

  4. JMeter学习笔记(四) HTTP Cookies 管理器

    有些接口执行时,要求要先登录,此时就需要用到 HTTP Cookies 管理器.不过有些项目是使用的token,即添加HTTP信息头管理器,获取登录后的token,至于token与cookies的区别 ...

  5. UnitOfWork知多少 【转】

    原文链接:https://www.cnblogs.com/sheng-jie/p/7416302.html 1. 引言 Maintains a list of objects affected by ...

  6. Bat 修改 xml 文件标签值

    xml 文件如下: <ConfigurationData> <ReportsFolder>\Reports</ReportsFolder> <Helpfold ...

  7. 1090 Highest Price in Supply Chain (25 分)(树的遍历)

    求所有叶节点中的最高价以及这个价格的叶节点个数 #include<bits/stdc++.h> using namespace std; ; vector<int>mp[N]; ...

  8. CodeForces A. Many Equal Substrings

    http://codeforces.com/contest/1029/problem/A You are given a string tt consisting of nn lowercase La ...

  9. 深入解析Vuex实战总结

    这篇文章主要介绍了Vuex的初探与实战小结,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 1.背景 最近在做一个单页面的管理后台项目,为了提高开 ...

  10. Codeforces Round #356 (Div. 2) C

    C. Bear and Prime 100 time limit per test 1 second memory limit per test 256 megabytes input standar ...