在页面制作的时候常用的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 });