首页 > 编程笔记 > JavaScript笔记
阅读:85
JS scroll事件:页面滚动
在 JavaScript 中,scroll 事件用于在浏览器窗口内移动文档的位置时触发,如通过键盘箭头键、翻页键或空格键移动稳定位置,或者通过滚动条滚动稳定位置。利用该事件可以跟踪文档位置变化,及时调整某些元素的的显示位置,确保它始终显示在屏幕可见区域内中。
示例
在下面示例中,控制红色小盒子始终位于窗口内坐标为(100px,100px)的位置。<div id="box"></div> <script> var box = document.getElementById("box"); box.style.position = "absolute"; box.style.backgroundColor = "red"; box.style.width = "200px"; box.style.height = "160px"; window.onload = f; //页面初始化时固定其位置 window.onscroll = f; //当文档位置发生变化时重新固定其位置 function f(){ //元素位置固定函数 box.style.left = 100 + parseInt(document.body.scrollLeft) + "px"; box.style.top = 100 + parseInt(document.body.scrollTop) + "px"; } </script> <div style="height:2000px;width:2000px;"></div>还有一种方法,就是利用 settimeout() 函数实现每间隔一定时间校正一次元素的位置,不过这种方法的损耗比较大,不建议使用。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频