两种监听页面滚动的方法

一、原生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. MyEclipse - 问题集 - build properties does not exist

    方案1 受MyEclipse生成的项目文件.project影响,检查其中是否含有“<nature>org.eclipse.pde.PluginNature</nature>”, ...

  2. <<程序猿健康指南>> 笔记

    序言: 长时间对着电脑工 作.一天下来基本不怎么走动的人,患高血压及 2 型糖尿病的风险远高于其他人群, 这两种疾病会对人体的健康产生长久的严重影响,还会增加心脏病及中风的几率. 前言: 阿米什人(A ...

  3. 安卓Dex壳技术探讨(1)

    最近在研究安卓平台的加壳技术,以前以为只有原生层的代码才可以加壳,看了看网上的资料,才发现原来Java层也可以加壳,虽然与传统的壳有些区别,但就最终的效果来说,反静态分析的目的还是达到了的. 目前安卓 ...

  4. spring 笔记2:Spring MVC : Did not find handler method for 问题的解决

    日志显示为: Looking up handler method for path /***Did not find handler method for [/***]No mapping found ...

  5. Python 爬虫-豆瓣读书

    import requests from bs4 import BeautifulSoup def parse_html(num): headers = { 'User-Agent': 'Mozill ...

  6. python3 虚拟环境配置

    CentOS7 python3 虚拟环境配置 1. 安装依赖包 yum -y install wget gcc epel-release git 2. 安装 Python3.6 yum -y inst ...

  7. 1099 Build A Binary Search Tree (30 分)(查找二叉树)

    还是中序遍历建树 #include<bits/stdc++.h> using namespace std; ; struct node { int data; int L,R; }s[N] ...

  8. 简述Shiro验证过程

    如果让我们自己实现用户登录验证我们都需要哪些步骤? 很简单,根据用户提供的账号从数据库中查询该账户的密码以及一些其他信息,然后拿这个密码与用户输入的密码相比较,因为保存在数据库中的密码一般是经过加密的 ...

  9. php中各种操作字符串和时间戳的代码关键词

    <?php/** * Created by 郭鹏. * User: msi * Date: 2017/9/27 * Time: 14:17 */ //随机数生成器echo rand();echo ...

  10. 七、LSP 里氏替换原则

    子类的对象提供了父类的所有行为,且加上子类额外的一些东西(可以是功能,可以是属性).当程序基于父类实现时,如果将子类替换父类而程序不需修改,则说明符合LSP原则. 这个解释看的似懂非懂,再看下面更进一 ...