在頁面制作的時候常用的html頁面滾動加載,可視區域判斷方法

演示圖

考慮2個情況
一種情況初始狀態下 滾動到在中間區域的時候,這時上半部分看不見的元素就不給字體添加紅色
一種情況是,從頭向下看的.

 

代碼

.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";// 給可視區域元素添加紅色
          }
     });
});