onscroll事件与onscrollTop
onscroll事件以及onscrollTop的使用
因为很久没有用原生js了所以导致很多东西都生疏了,今天一个案例用到了onscroll感觉很实用但是好像之前没怎么了解过(也可能是我忘干净了-.-)所以在这里记录一下
onscroll事件
onscroll 事件在元素滚动条在滚动时触发。
以上是菜鸟教程的定义,刚开始我以为这个事件其实和onmousewheel
事件是一会事,后来我发现它们两个其实是不同的。onmousewheel
监听的是鼠标事件而onscroll
事件监听的是元素滚动的事件,元素的滚动不仅仅靠鼠标的滚轮来触发还可以通过键盘上的方向键以及点击右边的滚动条等方式来触发。另外还有一点需要注意:
上面是我在菜鸟上截的图,其实不难看出onscroll是所有浏览器都支持的而且使用与其他普通事件没什么区别,但是我遇到了下面这个问题:
<div class="page"><div class="nav"></div></div><script>var nav = document.querySelector(".nav");let page = document.querySelector(".page");page.addEventListener("scroll",function(){console.log(111);})
</script>
上面的写法根本不能触发onscroll
事件,然后我换成下面的方式就能正常触发:
window.addEventListener("scroll",function(){console.log(111);})
我也不知道为什么使用其他元素就不能触发onscroll
但是使用window就能正常触发,总不能是因为onscroll
是window的专属事件吧,那也太扯了…
scrollTop
这个值是一个值,它表示元素距离顶部的距离,一般用它来做返回顶部这个功能
这里的图参考的是: https://www.cnblogs.com/wenruo/p/9754576.html.
element.scrollHeight - element.scrollTop === element.clientHeight
上面的代码是我引用上面博主的,用来判定元素是否滚动到底。其实这个倒不是难理解,主要是容易和什么offsetTop
、scrollHeight
、offsetHeight
等乱七八糟的值弄混,不过我个人建议最好是归纳一下,毕竟这些值在平时项目里面还是很常用的。
总结
虽然问题解决的差不多了但是还是有个小问题如鲠在咽,希望过几天能把这个小问题解决。
onscroll事件与onscrollTop相关推荐
- JS 动态添加 onload、onresize、onscroll 事件
window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加. 也就是说,它只能这样来( ...
- onscroll事件
window.onscroll事件 <script>window.onscroll = function () {var scrollTop = $(this).scrollTop();/ ...
- js onscroll android,JavaScript触发onScroll事件的函数节流详解
问题描述 常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A.B.C.D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮:点击B,锚点跳转至B栏目,同时顶部的B按钮高亮:我们在M ...
- onscroll 事件和onScrollCapture事件
1. onscroll 事件在元素滚动条在滚动时触发. HTML 中: <element onscroll="myScript"> JavaScript 中: obje ...
- js的window.onscroll事件
js的window.onscroll事件 js代码: window.onscroll = function(e){var e =e || window.event;var scrolltop=docu ...
- onscroll 事件
<div> 元素滚动时执行 JavaScript <div onscroll="myFunction()"> 定义和用法 onscroll 事件在元素滚动条 ...
- JS小练习——判断滚动条是否到底部(onscroll事件)
实现功能要求:当我们下拉这个滚动条时,判断它是否到达最底部,如果到达最底部,则两个表单项可以点击,如果没有到达,则不可以点击.并且要勾选第一个按钮之后,才可以提交. disabled 属性可设置或返回 ...
- window.onscroll 事件不触发问题
要求:滚动鼠标时,触发滚动事件: 问题:滚动时,没有触发事件: html,body{overflow-x: hidden;font-size: 16px;color: #666;margin: 0 a ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
在vue.js中直接使用onscroll不起作用 利用DOM二级监听事件即可, window.addEventListener('scroll',()=>{console.log(window. ...
最新文章
- 让我们一起来起花名吧
- 奎屯电信助力智慧城市光网建设
- Eclipse调试Logcat类的说明
- 计算机网络产生的历史背景,网络技术背景及sdn概述.pdf
- galaxy+note8+android+8.0,三星已经开始了S8/S8+以及Note8的Android9.0更新的开发工作!
- 服务器图纸被自动删除,JavaWeb项目图片消失的原因之一————服务器上图片目录被误删...
- 正交试验设计例题及答案_SPSS正交试验设计及其方差分析
- 普通微型计算机就是多媒体计算机,6-多媒体技术试题
- 深入理解Builder模式(转载)
- 20191202Spark
- 计算机无法自动连接网络连接,win7系统开机后无线网络无法自动连接的解决方法...
- 二、伊森商城 环境 虚拟机配置 p3
- EasyExcel 实现模板导出、模板导入分析功能
- 【VR】Unity3d VR学习笔记——Unity烘焙
- linux 网卡virbr0,Linux网络配置
- html转换成移动端h5,HTML5移动端手机网站基本模板
- sync包——WaitGroup
- 【笔试题】嵌入式软件开发——嵌入式软件工程师经典笔试题
- IOS11 弹窗上文本框光标错位问题
- CentOS:安装Docker
热门文章
- 解决Run As里面没有Java Application的方法
- 汉明码详解(哈工大计组)
- Redis6 哨兵模式
- 【Alios-things笔记】EMW3060 Socket编程
- Golang 并发控制和锁
- 复试不歧视的计算机院校,不歧视双非,保护一志愿!40所“良心”大学有你的选择吗?...
- 计算机科学与技术考研双非院校排名,2021QS亚洲大学排名出炉!这些双非院校力压名校,表现不俗!...
- PlanetScale 推出基于 Vitess 的分布式 MySQL 数据库服务
- 从本质上来看,所谓的即时零售,其实依然是电商进化的产物
- Twitter情绪分析全面教程指导--基于实际数据集和代码实战