我要评论演示图
考虑2个情况
一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色
一种情况是,从头向下看的.
css代码
.ss li {
margin: 40px;
}
<div class="ss">
<ul>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
<li>sss</li>
</ul>
</div>
const doct = window.document.documentelement;
const el = document.queryselectorall("li");
window.addeventlistener("scroll", () => {
el.foreach((v, i) => {
/*
考虑2个情况 , 一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色
一种情况是,从头向下看的.
*/
//
if (v.offsettop > doct.scrolltop && v.offsettop < doct.clientheight + doct.scrolltop) {
v.style.color = "red";// 给可视区域元素添加红色
}
});
});
原文：https://www.cnblogs.com/whnba/p/12853479.html
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论