js-监听页面滚动
两种监听页面滚动的方法
一、原生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-监听页面滚动的更多相关文章
- JS监听页面滚动到底部事件
废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop( ...
- react 监听页面滚动
html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...
- js监听页面放大缩小
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
- vue 中监听页面滚动
监听页面滚动 在methods中定义一个方法 handleScroll() { //获取滚动时的高度 let scrollTop = window.pageYOffset || document.do ...
- ionic 监听页面滚动,点击停止滚动
类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchen ...
- 原 JQuery监听页面滚动总结
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...
- JS监听页面关闭
JS可以监听浏览器页面的关闭,主要使用了window对象的onbeforeunload方法 在以前(旧版本的浏览器中),可以自定义提示文案 window.onbeforeunload = functi ...
- JQuery监听页面滚动总结
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...
- js监听页面是否在浏览器当前页面
在最近的一个socket项目中,需要监听客户端是否已读客服端发送的消息. 这里用到了html5中document新增了一个事件 visibilitychange,这个事件在页面前台或后台切换时被触发, ...
随机推荐
- Python语法之com[1][:-7]
strCom = com[0] + ": " + com[1][:-7] 如上应该是一个字符串合成,最后的[1][:-7],我理解是去除com[1]的最后7个字符. 比如com[0 ...
- PHP字符串word末字符大小写互换
要求 给出一个字符串如 “A journey of, a thousand 'miles' must can't \"begin\" with a single step.” ,通 ...
- selenium初识(二)——之webdriver API
配置完的环境之后,我们先来写一个小脚本: # __Author__:"Jim_xie" from selenium import webdriver from time impor ...
- 前端初学者——初探Modernizr.js Modernizr.js笔记
什么是Modernizr? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...
- 孤荷凌寒自学python第四十四天Python操作 数据库之准备工作
孤荷凌寒自学python第四十四天Python操作数据库之准备工作 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 今天非常激动地开始接触Python的数据库操作的学习了,数据库是系统化设计 ...
- 孤荷凌寒自学python第四十一天python的线程同步之Event对象
孤荷凌寒自学python第四十一天python的线程同步之Event对象 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 鉴于Lock锁与RLock锁均宣告没有完全完成同步文件操作的问题,于 ...
- Android之测试相关知识点
程序员在开发的过程中一定要进行严格的测试: --->相关概念 * 根据是否知道源代码可以分为: 黑盒测试:只关心程序执行的过程和结果并不知道程序源代码. 白盒测试: 根据源代码写测试方法 或者 ...
- (转)详解JavaScript模块化开发
https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...
- weex 开发 (已放弃了)
关于weex 开发 本菜已放弃使用了,当初选择使用weex 是为了同时支持h5 和 android / ios 三端:想法很不错,深入之后 突然发现,开发起来并没有很轻松,因为weex 中有些方法, ...
- [CF949C]Data Center Maintenance
题目大意:$n$个点,每个点有一个值$w_i$.$m$个条件,每个条件给出$x,y$,要求$w_x\not =w_y$.选择最少的点,使其值加$1$后,所有条件成立(数据保证有解). 题解:对于每个条 ...