javascript - Skrollr transform函数导致文本抖动

Question

我将使用 skrollr.js 对位于另一个 div 旁边的内部 div 做一些过渡效果。内部 div 是相对定位的。

我的代码是

HTML 结构

<div class="outer">
  <div class="inner-div" style="transition:transform .3s ease;" data-top="transform:translateY(0px)" data--80p-top="transform:translateY(300px)">
     <h1>some thing</h1>
  </div>
</div>

问题是滚动时 (h1) 会产生很大的垂直抖动 有什么解决办法？

Answer 1

只是一个小指针，我在使用 scrollr.js 时犯了类似的错误，最初:

  <div class="inner-div" style="transition:transform .3s ease;" data-top="transform:translateY(0px)" data--80p-top="transform:translateY(300px)">

scrollr.js 允许负索引，但为什么需要它？试试下面的代码:

 <div class="inner-div" style="transition:transform .3s ease;" data-0="transform:translateY(0px)" data-80p-top="transform:translateY(300px)">

您想要的效果非常简单，如果您有时间，请查看 the examples of Scrollr.js ，这是一个有据可查的插件。