diff --git a/scroll b/scroll new file mode 100644 index 0000000..53b954c --- /dev/null +++ b/scroll @@ -0,0 +1,72 @@ +class DelayedScroll { + constructor() { + this.initialized = false; + this.maxScroll = window.innerHeight * 2; // 最多监听2屏的高度 + this.init(); + } + + init() { + if (this.initialized) return; + + let ticking = false; + + const handleScroll = () => { + if (!ticking) { + requestAnimationFrame(() => { + const scrollY = window.scrollY; + + // 只在首屏范围内应用效果 + if (scrollY <= this.maxScroll) { + this.updateElements(scrollY); + } else { + // 超出范围时停止监听 + window.removeEventListener('scroll', scrollHandler); + this.cleanup(); + } + + ticking = false; + }); + ticking = true; + } + }; + + // 使用节流的滚动监听 + const scrollHandler = () => { + if (window.scrollY <= this.maxScroll) { + handleScroll(); + } + }; + + window.addEventListener('scroll', scrollHandler, { passive: true }); + + // 初始执行一次 + this.updateElements(window.scrollY); + + this.initialized = true; + } + + updateElements(scrollY) { + document.querySelectorAll('.delayed-element').forEach(element => { + const delayFactor = this.getDelayFactor(element); + const delay = scrollY * delayFactor; + element.style.setProperty('--scroll-delay', delay); + }); + } + + getDelayFactor(element) { + return parseFloat( + getComputedStyle(element).getPropertyValue('--delay-factor') || 0.2 + ); + } + + cleanup() { + // 可选:移除transform,恢复原状 + document.querySelectorAll('.delayed-element').forEach(element => { + element.style.removeProperty('--scroll-delay'); + element.style.removeProperty('transform'); + }); + } +} + +// 使用 +new DelayedScroll(); \ No newline at end of file