动画放在内容区域上，滚动轴滑过动画则动画自动消失？

Question

主要每个内容区滑过动画就自动顶掉动画区域，此时高度需要重新计算，而监听滚动轴会一直往下滚，看起来效果很不自然，想知道有没有什么好的方法？然后监听滚动轴的方法在移动端不适应，因为vue框架引入了postcss，高度改变了，此时监听滚动轴不起作用，因为监听滚动轴挂载在methods上

 

Answer 1

针对你的问题，我可以给出一些解决方案：

1. 使用CSS的position属性，将动画区域定位为fixed，这样无论内容区域如何滚动，动画区域都会保持不变，不需要重新计算高度。

2. 使用JavaScript监听滚动事件，并根据滚动条的位置来进行动画区域的显示和隐藏。可以使用getBoundingClientRect()方法获取动画区域在当前可视窗口的位置，当动画区域出现在可视区域内时，显示动画，否则隐藏动画。

3. 在Vue框架中，可以使用Vue的内置指令v-scroll来监听滚动事件。将监听滚动事件的相关逻辑写在Vue的methods中，并在v-scroll指令中绑定即可。

无论采取哪种方案，都需要根据具体情况进行调整和优化，以达到最佳效果。