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,这个事件在页面前台或后台切换时被触发, ...
随机推荐
- mongodb导入json文件(WINDOWS)
mongodb导入json格式的文件的命令是mongoimport: 在下面的这个例子中,使用mongoimport命令将文件pi.json中的内容导入loacal数据库的pi集合中. 打开CMD,进 ...
- 更改maven本地仓库地址
1.进入maven安装conf文件中,编辑settings.xml文件,新增图中的圈出的内容(我想要存放的地址是D:\HMY\m2\repository) 2.复制settings.xml文件至D:\ ...
- (转\整)UE4游戏优化 多人大地型游戏的优化(二)渲染线程的优化
施主分享随缘,评论随心,@author:白袍小道 小道暗语: 1.因为小道这里博客目录没自己整,暂时就用随笔目录结构,所以二级目录那啥就忽略了.标题格式大致都是(原or转) 二级目录 (标题) 2.因 ...
- Leetcode 670.最大交换
最大交换 给定一个非负整数,你至多可以交换一次数字中的任意两位.返回你能得到的最大值. 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7. 示例 2 : 输入: 9973 ...
- C#利用VFW实现摄像头程序
最近在搞这个考试监控,找来VFW的资料,胡编乱凑而成. VFW全称为Video for Windows,是微软提供的,内嵌windows系统. 首先定义一个VideoAPI类. 首先调用avicap3 ...
- WeUI 在小程序中使用
才接触小程序.想找个ui框架..也不知道咋弄: 下载地址:点击打开链接 将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下 引入weui.wxs ...
- HTML5的JavaScript选择器介绍
在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定nam ...
- PHP命名空间与use
当在一个大型项目很多程序员书写模板时,最怕出现的问题就是命名,如果一个PHP脚本出现了同名的类或者方法,就会报错(fatal error),使用命名空间可以 解决这个问题 知识点: 命名空间names ...
- luajit的字节码
http://blog.csdn.net/zzz3265/article/details/41146569 这里写出了luajit的字节码
- EXTJS4.0 form 表单提交 后 回调函数 不响应的问题
在提交表单后,应返回一个 JSON 至少要包含{success:true} 否则,EXT 不知道是否成功,没有响应. {success:true,msg:'成功',Url:'http://www.ba ...