演示图
考虑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