js滚动刷屏小实例

最新推荐文章于 2023-03-02 11:34:06 发布

原创最新推荐文章于 2023-03-02 11:34:06 发布 · 851 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

40 篇文章

订阅专栏

这是一个使用JavaScript编写的简单滚动刷屏实例，通过改变div元素的背景颜色来实现视觉上的滚动效果。当div元素进入视口时，背景色变为粉色，离开视口则恢复原色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
line-height: 40px;
border: 1px solid red;
}
</style>
<body>
<div>第1屏</div>
<div>第2屏</div>
<div>第3屏</div>
<div>第4屏</div>
<div>第5屏</div>
<div>第6屏</div>
<div>第7屏</div>
<div>第8屏</div>
<div>第9屏</div>
<div>第10屏</div>
<div>第11屏</div>
<div>第12屏</div>
<div>第13屏</div>
<div>第14屏</div>
<div>第15屏</div>
<div>第16屏</div>
<div>第17屏</div>
<div>第18屏</div>
<div>第19屏</div>
<div>第20屏</div>
<div>第21屏</div>
<div>第22屏</div>
<div>第23屏</div>
<div>第24屏</div>
<div>第25屏</div>
<div>第26屏</div>
<div>第27屏</div>
<div>第28屏</div>
<div>第29屏</div>
<div>第30屏</div>
</body>
<script type="text/javascript">
//1.获取元素

var div = document.getElementsByTagName('div');

//2.自定义方法获取元素到页面的距离
function offset(element) {

//3.1获取当前元素的offsetTop
var pos = {left:0,top:0};

//3.2获取元素有定位的父级的位置
var parents = element.offsetParent;

//3.3先加上自己的left top
pos.left += element.offsetLeft;

pos.top += element.offsetTop;

while(parents && !/html|body/i.test(parents.tagName)) {

pos.top += parents.offsetTop;

pos.left += parents.offsetLeft;

parents = parents.offsetParent;

}

return pos

}

//3.添加滚动事件
window.onscroll = function(){

//4.获取滚动条位置
var sTop = document.documentElement.scrollTop || document.body.scrollTop;

console.log(sTop);

//5.遍历div
for(var i = 0; i<div.length;i++){

//6.获取当前元素的位置
var top1 = offset(div[i]).top;

//7. 如果滚动条位置大于等于当前元素位置说明到了这个位置
if(sTop>=top1){

//8.变颜色

div[i].style.background='pink';

}else{

div[i].style.background = '';

}

}

}
</script>
</html>