首页 > 编程笔记 > JavaScript笔记 阅读:1,093

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() 函数实现每间隔一定时间校正一次元素的位置,不过这种方法的损耗比较大,不建议使用。

爱面试的程序媛,一个分享面试经验的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,定时分享程序员面试的那点事。

面试如何造火箭?工作如何拧螺丝?都在这个公号哦。

扫描二维码关注公众号,免费领取价值 1000 元的求职面试资料(限时免费)!

当你决定关注「爱面试的程序媛」,你已然超越了90%的程序员!

爱面试的程序媛二维码
微信扫描二维码关注

所有教程

优秀文章