在页面制作的时候常用的html页面滚动加载,可视区域判断方法
演示图
考虑2个情况
一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色
一种情况是,从头向下看的.
代码
1 .ss li { 2 margin: 40px; 3 } 4 <div class="ss"> 5 <ul> 6 <li>sss</li> 7 <li>sss</li> 8 <li>sss</li> 9 <li>sss</li> 10 <li>sss</li> 11 <li>sss</li> 12 <li>sss</li> 13 <li>sss</li> 14 <li>sss</li> 15 <li>sss</li> 16 <li>sss</li> 17 <li>sss</li> 18 <li>sss</li> 19 <li>sss</li> 20 <li>sss</li> 21 <li>sss</li> 22 <li>sss</li> 23 <li>sss</li> 24 <li>sss</li> 25 <li>sss</li> 26 <li>sss</li> 27 </ul> 28 </div>
1 const doct = window.document.documentElement; 2 const el = document.querySelectorAll("li"); 3 window.addEventListener("scroll", () => { 4 el.forEach((v, i) => { 5 /* 6 考虑2个情况 , 一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色 7 一种情况是,从头向下看的. 8 */ 9 // 10 if (v.offsetTop > doct.scrollTop && v.offsetTop < doct.clientHeight + doct.scrollTop) { 11 v.style.color = "red";// 给可视区域元素添加红色 12 } 13 }); 14 });
