DEV Community
·
使用 Stimulus 在滚动时更改 CSS
原文英文，约500词，阅读约需2分钟。
📝
内容提要
文章介绍了如何在滚动时调整UI元素以吸引用户注意。作者创建了一个可重用的Stimulus控制器，通过监听滚动事件动态添加或移除CSS类。实现包括设置HTML结构和JavaScript代码，使用requestAnimationFrame优化性能，并在元素移除时清除事件监听器。该控制器可在其他元素中复用，只需更改触发和观察目标及交叉类。
🎯
关键要点
-
文章介绍了如何根据滚动状态调整UI元素以吸引用户注意。
-
创建了一个可重用的Stimulus控制器，通过监听滚动事件动态添加或移除CSS类。
-
实现包括设置HTML结构和JavaScript代码，使用requestAnimationFrame优化性能。
-
在元素移除时清除事件监听器以保持良好的性能。
-
该控制器可在其他元素中复用，只需更改触发和观察目标及交叉类。
❓
延伸问答
如何使用Stimulus控制器在滚动时更改CSS？
通过创建一个可重用的Stimulus控制器，监听滚动事件并动态添加或移除CSS类来实现。
在实现中如何优化滚动性能？
使用requestAnimationFrame来优化滚动性能，确保checkPosition函数高效调用。
如何设置HTML结构以配合Stimulus控制器？
需要设置包含data-controller、data-intersect-intersecting-class和data-intersect-target属性的HTML结构。
如何在元素移除时清除事件监听器？
在disconnect方法中调用this.element.removeEventListener来移除滚动事件监听器。
这个Stimulus控制器可以复用于哪些场景？
可以复用于其他元素，只需更改触发和观察目标及交叉类即可。
在滚动时如何判断元素的相对位置？
通过比较观察目标和触发目标的边界矩形位置来判断它们的相对位置。
🏷️
