两种监听页面滚动的方法

一、原生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. PKUWC 2018 彻底滚粗记

    PKUWC 2018 彻底滚粗记 如果你们有看到我又在颓, 请以这篇文章让我回忆起这不堪回首的往事. day -3 据说我们要参加PKUWC? 谢总要求我们练习面试,写个稿子. 不知道为什么,有一种不 ...

  2. iOS算法笔记-快速排序-OC实现

    快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另 ...

  3. 剑指Offer - 九度1520 - 树的子结构

    剑指Offer - 九度1520 - 树的子结构2013-11-30 22:17 题目描述: 输入两颗二叉树A,B,判断B是不是A的子结构. 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每 ...

  4. 架构师速成5.1-小学gtd进阶 分类: 架构师速成 2015-06-26 21:17 313人阅读 评论(0) 收藏

    人生没有理想,那和咸鱼有什么区别. 有了理想如何去实现,这就是gtd需要解决的问题.简单说一下gtd怎么做? 确定你的目标,如果不能确定长期目标,至少需要一个2年到3年的目标. 目标必须是可以衡量的, ...

  5. Kotlin中when表达式的使用:超强的switch(KAD 13)

    作者:Antonio Leiva 时间:Feb 23, 2017 原文链接:https://antonioleiva.com/when-expression-kotlin/ 在Java(特别是Java ...

  6. Python全栈工程师(面向对象)

    ParisGabriel                每天坚持手写  一天一篇  决定坚持几年 为了梦想为了信仰    开局一张图 Python人工智能从入门到精通 day16补充: 异常处理 文件 ...

  7. juqery基本选择器和层级选择器

    1.基本选择器,主要通过标签名称,样式,id等选择标签,如下代码是简单的使用 (1)根据标签或者样式筛选 <!DOCTYPE html> <html lang="en&qu ...

  8. Git 提交修改

    今天发现前几天的某一个提交因为忽略文件的问题而导致有几个文件没有提交,需要修改一下某个提交,研究一下可以用rebase命令来完成,执行过程模拟如下: 1. 环境搭建,版本库如下: 文件目录如下: 假设 ...

  9. java GUI Graphics2D 绘图

    Graphics类提供基本绘图方法,Graphics2D类提供更强大的绘图能力.本节讲解Graphics类,下节讲解Graphics2D. Graphics类提供基本的几何图形绘制方法,主要有:画线段 ...

  10. freebsd网卡驱动程序详解

    freebsd网卡驱动程序详解 来源 https://blog.csdn.net/h_cszc/article/details/7776116 /* 注释:xie_minix */ /*此处为BSD申 ...