DEV Community ·

使用 Stimulus 在滚动时更改 CSS

💡 原文英文，约500词，阅读约需2分钟。

📝

内容提要

文章介绍了如何在滚动时调整UI元素以吸引用户注意。作者创建了一个可重用的Stimulus控制器，通过监听滚动事件动态添加或移除CSS类。实现包括设置HTML结构和JavaScript代码，使用requestAnimationFrame优化性能，并在元素移除时清除事件监听器。该控制器可在其他元素中复用，只需更改触发和观察目标及交叉类。

🎯

关键要点

文章介绍了如何根据滚动状态调整UI元素以吸引用户注意。
创建了一个可重用的Stimulus控制器，通过监听滚动事件动态添加或移除CSS类。
实现包括设置HTML结构和JavaScript代码，使用requestAnimationFrame优化性能。
在元素移除时清除事件监听器以保持良好的性能。
该控制器可在其他元素中复用，只需更改触发和观察目标及交叉类。

🔎

延伸解读

滚动事件的性能优化

文章中提到使用requestAnimationFrame来优化滚动事件的性能。这种方法可以有效减少浏览器的重绘次数，避免因频繁触发事件而导致的性能下降，尤其是在处理复杂UI时，开发者应优先考虑这种优化手段。

可重用性的重要性

创建的Stimulus控制器具有良好的可重用性，开发者可以轻松地将其应用于不同的UI元素。只需调整触发和观察目标及交叉类，这种灵活性使得代码维护和扩展变得更加高效，适合快速迭代的开发环境。

事件监听器的管理

在控制器中，确保在元素从DOM中移除时清除事件监听器是非常重要的。这不仅可以防止内存泄漏，还能保持应用的性能稳定。开发者在实现类似功能时，需注意事件的生命周期管理。

❓

延伸问答

如何使用Stimulus控制器在滚动时更改CSS？

通过创建一个可重用的Stimulus控制器，监听滚动事件并动态添加或移除CSS类来实现。

在实现中如何优化滚动性能？

使用requestAnimationFrame来优化滚动性能，确保checkPosition函数高效调用。

如何设置HTML结构以配合Stimulus控制器？

需要设置包含data-controller、data-intersect-intersecting-class和data-intersect-target属性的HTML结构。

如何在元素移除时清除事件监听器？

在disconnect方法中调用this.element.removeEventListener来移除滚动事件监听器。

这个Stimulus控制器可以复用于哪些场景？

可以复用于其他元素，只需更改触发和观察目标及交叉类即可。

在滚动时如何判断元素的相对位置？

通过比较观察目标和触发目标的边界矩形位置来判断它们的相对位置。

🏷️