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,这个事件在页面前台或后台切换时被触发, ...
随机推荐
- Maven学习 (二) Eclipse 上安装 Maven3插件
eclipse 安装插件的方式最常见的有两种: 1. 一种是在线安装,这貌似是用的最多的,就是:Help --> Install New Software,然后输入 HTTP 地址来安装,但 ...
- laravel5.5用户认证
目录 1. 命令 2. 快速认证 2.1 自定义路径 2.2 自定义用户名 2.3 自定义看守器 2.4 自定义验证/存储 2.5 Auth::xx() 2.6 保护路由 2.7 指定看守器 3 手动 ...
- 关于mac ox node安装报 npm ERR! registry error parsing json
想安装grunt 遇到2个问题 让npm重新设置一下config: npm config set registry http://registry.cnpmjs.org 然后还报 npm ERR! E ...
- .Net导出Word和Excel
using System; using System.Collections.Generic; using System.Linq; using System.Web; public class Ex ...
- SpringMVC 集成 Freemarker 模板引擎
本文通过 maven 项目中集成 1.引入 SpringMVC 与 Freemarker 需要的依赖 <!-- SpringMVC --> <dependency> <g ...
- System.Activator类
public static ObjectHandle CreateInstance(string assemblyName, string typeName); 该类有一个方法. // // 摘要: ...
- ubuntu16.04 搭建nexus+maven 学习
/opt/nexus-2.10.0-02/bin vim nexus 关键配置: RUN_AS_USER=root JAVA_HOME=/usr/lib/java/jre export NEXUS_H ...
- composer 库无法提交git
composer require firebase/php-jwt 安装了该库,想提交到版本库,无论如何也提交不上去,.ignore中也没忽略,网上寻找答案,说有个.git文件夹需要删除 PHPSTO ...
- (总结)Nginx使用的php-fpm的两种进程管理方式及优化
PS:前段时间配置php-fpm的时候,无意中发现原来它还有两种进程管理方式.与Apache类似,它的进程数也是可以根据设置分为动态和静态的. php-fpm目前主要又两个分支,分别对应于php-5. ...
- 2016年NK冬季训练赛 民间题解
A题 水题,考察对行的读入和处理,注意使用long long #include <iostream> #include <cstring> #include <cstdi ...