TA貢獻2012條經驗 獲得超12個贊
下面是使用交集觀察者 API 的簡單示例
const inViewport = (entries, observer) => {
entries.forEach(entry => {
entry.target.classList.toggle("active", entry.isIntersecting);
});
};
let observer = new IntersectionObserver(inViewport);
observer.observe(document.querySelector('#box'));
body { height:300vh; }
#box { width:100px; height:100px; position:absolute; top:150vh; background:red; }
/* InViewport transitions */
[data-inviewport="fade-rotate"] { /* Default state */
transition: 2s;
opacity: 0.1;
}
[data-inviewport="fade-rotate"].active { /* Active state */
transform: rotate(180deg);
opacity: 1;
}
Scroll down...
<div id="box" data-inviewport="fade-rotate"></div>
TA貢獻1806條經驗 獲得超5個贊
當元素進入頁面底部時，將觸發此操作：
if(element.getBoundingClientRect().top <= window.innerHeight)
當元素豐富屏幕中間時，將觸發
if(element.getBoundingClientRect().top <= window.innerHeight / 2)
當然，所有事件都應該在窗口事件上onscroll
舉報