如何使用skrollr设置多个data-anchor-target或按百分比触发动画？

一、设置多个锚点重复执行相同动画 #

skrollr本身不支持给单个元素绑定多个data-anchor-target，但可以通过以下两种方式实现重复动画效果：

• 复制动画元素匹配对应锚点：给每个需要触发动画的锚点元素添加统一类名，然后为每个锚点对应生成一个动画元素，绑定相同的动画规则。

  <!-- 多个锚点元素 -->
  <section class="trigger-section"></section>
  <section class="trigger-section"></section>
  <section class="trigger-section"></section>
  
  <!-- 对应每个锚点的动画元素 -->
  <div class="repeat-animation" 
       data-anchor-target=".trigger-section:nth-child(1)"
       data-top="opacity: 0; transform: scale(0.8)"
       data-bottom="opacity: 1; transform: scale(1)"></div>
  <div class="repeat-animation" 
       data-anchor-target=".trigger-section:nth-child(2)"
       data-top="opacity: 0; transform: scale(0.8)"
       data-bottom="opacity: 1; transform: scale(1)"></div>
  <div class="repeat-animation" 
       data-anchor-target=".trigger-section:nth-child(3)"
       data-top="opacity: 0; transform: scale(0.8)"
       data-bottom="opacity: 1; transform: scale(1)"></div>
  

• JS动态绑定锚点逻辑：如果不想重复DOM元素，可以监听skrollr的滚动事件，判断当前滚动位置是否到达目标锚点区间，手动给目标元素添加/移除动画类。

二、用百分比位置触发动画 #

skrollr支持直接使用百分比格式的滚动位置（单位p）替代固定像素值，完美适配百分比尺寸的元素：

• 直接基于页面视口百分比设置动画触发点：

  <div class="percent-animation"
       data-0p="transform: translateY(100vh)"
       data-50p="transform: translateY(0)"
       data-100p="transform: translateY(-100vh)"></div>
  

  这里data-0p对应页面顶部（0%视口高度），data-50p对应滚动到半屏位置，data-100p对应滚动到整屏位置。
• 结合百分比高度的锚点元素：如果锚点元素用vh或百分比设置高度，可通过相对锚点属性（data-top/data-bottom/data-center）触发动画：

  <section class="percent-trigger" style="height: 30vh;"></section>
  <div class="anchor-animation"
       data-anchor-target=".percent-trigger"
       data-top="opacity: 0"
       data-bottom="opacity: 1"></div>
  

额外注意事项 #

• 动态生成锚点或动画元素后，需调用skrollrInstance.refresh()重新计算滚动触发点
• 初始化skrollr时无需额外配置，默认支持百分比和相对锚点模式

内容的提问来源于stack exchange，提问作者FireTiger