两种监听页面滚动的方法

一、原生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. Hadoop学习笔记系列

    Hadoop学习笔记系列   一.为何要学习Hadoop? 这是一个信息爆炸的时代.经过数十年的积累,很多企业都聚集了大量的数据.这些数据也是企业的核心财富之一,怎样从累积的数据里寻找价值,变废为宝炼 ...

  2. 怎么设置才能让外网ip可以访问mysql数据库[转]

    转自: http://www.hongyanliren.com/89.html 使用mysql中,很多人都会遇到这样的问题:在vps服务器或者云服务器上安装了mysql后,使用其他工具在外网ip之下根 ...

  3. 风格指南--C++

    0.避免多重包含是学编程时基本的要求; 1. 前置声明是为了降低编译依赖,防止修改一个头文件引发多米诺效应; 2. 内联函数的合理使用可提高代码执行效率; 3. ‐inl.h 可提高代码可读性 (一般 ...

  4. 每天一个Linux命令(11):cat命令

    cat命令连接文件并打印到标准输出设备上. 注意:当文件较大时,文本在屏幕上迅速闪过(滚屏),用户往往看不清所显示的内容.因此,一般用more等命令分屏显示.为了控制滚屏,可以按Ctrl+S键,停止滚 ...

  5. ASP NET Core ---Automapper

    官方文档:http://docs.automapper.org/en/stable/index.html 一.安装和配置: 二.使用: 1.建立 Profile文件: public class Map ...

  6. Entity Framework(一)

    相关知识点复习: 1.var 类型推断: var p=new Person(); 2.匿名类型: var a=new {Name="wang",Age=12  }; 3.给新创建的 ...

  7. Vim常用指令总结(持续更新中)

    1 模式变更 命令 说明 a(append)/i(insert) 普通模式→插入模式 : 普通模式→命令行模式 ESC或者Ctrl 插入模式→普通模式 R(Replace)/Insert两次 普通模式 ...

  8. 【志银】php5.6-Apache2.4-mysql5.6环境配置(win7_64位)

    ----------------------------------------------------- ★软件工具:(下载时注意下载相应版本,不同版本安装细节可能会有差异!!) 1>http ...

  9. PAT——甲级1042:Shuffling Mashine

    终于做到甲级了 就一个感觉....题目是真的看不懂,亏我还是四六级都过了的人....可是看完题愣是一点都不懂是什么意思. 1042 Shuffling Machine (20 point(s)) Sh ...

  10. xcrun: error: active developer path

    xcrun: error: active developer path ("/Applications/Xcode 2.app/Contents/Developer") does ...