两种监听页面滚动的方法

一、原生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. PQFitness

    <html> <head> <title></title> <style> *{margin:o;padding:0;} #header{ ...

  2. Linux & Windows 查看 ip 地址

    Windows 查看本机 IP 打开 cmd,输入 ipconfig,回车,找到IPv4地址 或者通过以下方式查看 点击Win10系统的右下角的宽带连接图标,如下图所示.        点击弹出菜单的 ...

  3. Wordpress 后台文章编辑区添加模板选择功能

    功能:后台编辑文章时,可以选择文章使用的模板,效果如下图: 操作步骤: <?php /** * Template Name: kbsingle full * Add by Ryan 3/18/2 ...

  4. shell之dialog提示窗口

    dialog 提示窗口 1.msgbox     dialog --msgbox text 20 10 2.yesno     dialog --title "Please answer&q ...

  5. 爬虫:Scrapy7 - Scrapy终端(Scrapy shell)

    Scrapy 终端是一个交互终端,可以在未启动 spider 的情况下尝试及调试你的爬取代码.其本意是用来测试提取数据的代码,不过可以将其作为正常的 Python 终端,在上面测试任何 Python ...

  6. PHP7 深入理解

    读 PHP7的内核剖析 php7-internal 记录 3 PHP的相关组成 3.1 SAPI php常见的四种运行模式 SAPI:Server Application Programming In ...

  7. Java分布式数据导出实践

    伴随业务发展日益剧增,对数据的要求越来越多也越来越高. 用户在浏览器发起导出请求--web服务器接收请求--请求后台获取数据--数据统计后生成excel或其他图标--响应给客户端 整个过程至少5步,才 ...

  8. WebIDE

    1 1 1 WebIDE 是什么? WebIDE 是 一款在线集成开发环境( Integrated Development Environment ). 开发者只需要一个浏览器就可以编写代码,并在We ...

  9. [poj] 2618 popular cows

    原题 这是一个强连通分量板子题. a thinks b is popular 即为a到b有一条边,要求被所有牛popular的牛的个数. 所求为对图进行强连通分量缩点后,没有出度的强连通分量里的点数( ...

  10. BZOJ 1876 [SDOI2009] SuperGcd | PY好题

    题面就是让你求两个超级大整数,求GCD 题解: 题目本意应该是出题人想考考高精度取膜 但是可以通过一种神奇的Stein算法来做 由J. Stein 1961年提出的Stein算法很好的解决了欧几里德算 ...