演示圖

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

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

程式碼

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