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,这个事件在页面前台或后台切换时被触发, ...
随机推荐
- PQFitness
<html> <head> <title></title> <style> *{margin:o;padding:0;} #header{ ...
- Linux & Windows 查看 ip 地址
Windows 查看本机 IP 打开 cmd,输入 ipconfig,回车,找到IPv4地址 或者通过以下方式查看 点击Win10系统的右下角的宽带连接图标,如下图所示. 点击弹出菜单的 ...
- Wordpress 后台文章编辑区添加模板选择功能
功能:后台编辑文章时,可以选择文章使用的模板,效果如下图: 操作步骤: <?php /** * Template Name: kbsingle full * Add by Ryan 3/18/2 ...
- shell之dialog提示窗口
dialog 提示窗口 1.msgbox dialog --msgbox text 20 10 2.yesno dialog --title "Please answer&q ...
- 爬虫:Scrapy7 - Scrapy终端(Scrapy shell)
Scrapy 终端是一个交互终端,可以在未启动 spider 的情况下尝试及调试你的爬取代码.其本意是用来测试提取数据的代码,不过可以将其作为正常的 Python 终端,在上面测试任何 Python ...
- PHP7 深入理解
读 PHP7的内核剖析 php7-internal 记录 3 PHP的相关组成 3.1 SAPI php常见的四种运行模式 SAPI:Server Application Programming In ...
- Java分布式数据导出实践
伴随业务发展日益剧增,对数据的要求越来越多也越来越高. 用户在浏览器发起导出请求--web服务器接收请求--请求后台获取数据--数据统计后生成excel或其他图标--响应给客户端 整个过程至少5步,才 ...
- WebIDE
1 1 1 WebIDE 是什么? WebIDE 是 一款在线集成开发环境( Integrated Development Environment ). 开发者只需要一个浏览器就可以编写代码,并在We ...
- [poj] 2618 popular cows
原题 这是一个强连通分量板子题. a thinks b is popular 即为a到b有一条边,要求被所有牛popular的牛的个数. 所求为对图进行强连通分量缩点后,没有出度的强连通分量里的点数( ...
- BZOJ 1876 [SDOI2009] SuperGcd | PY好题
题面就是让你求两个超级大整数,求GCD 题解: 题目本意应该是出题人想考考高精度取膜 但是可以通过一种神奇的Stein算法来做 由J. Stein 1961年提出的Stein算法很好的解决了欧几里德算 ...