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,这个事件在页面前台或后台切换时被触发, ...
随机推荐
- Android学习记录(8)—Activity的四种加载模式及有关Activity横竖屏切换的问题
Activity有四种加载模式:standard(默认), singleTop, singleTask和 singleInstance.以下逐一举例说明他们的区别: standard:Activity ...
- 转载: keepalived工作原理和配置说明
转自:http://outofmemory.cn/wiki/keepalived-configuration keepalived是什么 keepalived是集群管理中保证集群高可用的一个服务软件, ...
- 解决ubuntu发热严重的问题
对于双显卡PC安装ubuntu ,风扇狂转,发热严重,原因基本双显卡的优化导致. 解决具体步骤如下: 命令行输入sudo apt-get install bumblebee bumblebee-nvi ...
- 百度webuploader上传 1
百度webupload网址:http://fex.baidu.com/webuploader/ 引入js和css <script src="../../Content/webuploa ...
- 设置hostname
由于 http://1.2.3.4 不是一个有效的 apt 源,安装肯定会失败,我们可以在 /var/log/cloud-init.log 看到失败的信息. cloud-init 默认会将 insta ...
- sdram之乒乓操作
在实时显示时,为了保证画面显示的完整性需要对SDRAM进行乒乓操作. SDRAM 中有 4 个bank ,地址分别为00 01 10 11,后面将用 0 1 2 3来描述 bank 0和1 作为第一个 ...
- Java TCP通信概念及实例
TCP/UDP 协议 通俗解释: TCP协议和UDP协议的区别类似于电话系统和邮政系统. <1>TCP:类似于电话系统,建立双向的通信通道,确定连接,话音顺序接听. <2>UD ...
- hadoop生态圈列式存储系统--kudu介绍及安装配置
介绍 Kudu 是一个针对 Apache Hadoop 平台而开发的列式存储管理器.Kudu 共享 Hadoop 生态系统应用的常见技术特性: 它在 commodity hardware(商品硬件)上 ...
- P3531 [POI2012]LIT-Letters
题目描述 Little Johnny has a very long surname. Yet he is not the only such person in his milieu. As it ...
- DP———3.最长上升子序列的和
Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very popular in HDU. May ...