java 滚动加载,滚动加载,可视区域判断
生活随笔
收集整理的這篇文章主要介紹了
java 滚动加载,滚动加载,可视区域判断
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
演示圖
考慮2個情況
一種情況初始狀態下 滾動到在中間區域的時候,這時上半部分看不見的元素就不給字體添加紅色
一種情況是,從頭向下看的.
CSS代碼
.ss li {
margin: 40px;
}
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
- sss
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";// 給可視區域元素添加紅色
}
});
});
總結
以上是生活随笔為你收集整理的java 滚动加载,滚动加载,可视区域判断的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ecmall支持php5.3,在PHP5
- 下一篇： mysql fetch rows,php