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,这个事件在页面前台或后台切换时被触发, ...
随机推荐
- laravel5.5路由使用name的好处
使用name的好处 辅助函数 route 可以用于为指定路由生成 URL.命名路由生成的 URL 不与路由上定义的 URL 相耦合.因此,就算路由的 URL 有任何更改,都不需要对 route 函数调 ...
- laravel5.5路由
目录 1. routes/web.php 2. routes/api.php 3. 重定向路由 4. 路由参数 5. 约束 6. 命名路由 7. 路由组 8 路由模型绑定 9 表单方法伪造 10 访问 ...
- USACO Section1.3 Mixing Milk 解题报告
milk解题报告 —— icedream61 博客园(转载请注明出处)----------------------------------------------------------------- ...
- 【Theory of Generalization】林轩田机器学习基石
紧接上一讲的Break Point of H.有一个非常intuition的结论,如果break point在k取到了,那么k+1, k+2,... 都是break point. 那么除此之外,我们还 ...
- matlab使用摄像头人脸识别
#关于matlab如何读取图片.视频.摄像头设备数据# 参见:http://blog.csdn.net/u010177286/article/details/45646173 但是,关于摄像头读取,上 ...
- 附录:python and numpy
http://cs231n.github.io/python-numpy-tutorial/ Python is a great general-purpose programming languag ...
- 3D U-Net卷积神经网络
3D U-Net这篇论文的诞生主要是为了处理一些块状图(volumetric images),基本的原理跟U-Net其实并无大差,因为3D U-Net就是用3D卷积操作替换了2D的,不过在这篇博文中我 ...
- ZOJ 3717 Balloon ( TLE )
正解2-SAT. 我用DLX想搜一搜的,结果TLE了…… 没什么遗憾,最起码我尝试过了. 扔个代码留作纪念. #include <cstdio> #include <cstring& ...
- selenium webdriver——JavaScript警告窗处理
在WebDriver中处理JavaScript所生成的alert.confirm以及prompt,具体方法是使用switch_to_alert()方法定位到alert.confirm以及 prompt ...
- PHP命名空间与use
当在一个大型项目很多程序员书写模板时,最怕出现的问题就是命名,如果一个PHP脚本出现了同名的类或者方法,就会报错(fatal error),使用命名空间可以 解决这个问题 知识点: 命名空间names ...