如何防止我的 CSS 动画使我的页面滚动？

Question

我有一个 CSS 动画，它位于一个关注自己业务的页面上。动画通过更改第一个单词的 margin-top 值来循环播放一些单词。

如果我滚动网页以使动画的中心接触到视口的顶部，则页面会随着动画的移动而开始滚动。注意该页面上还有其他项目，因此滚动条是必需的。

查看实际效果（填充 div 中的动画以模拟可滚动页面）：https://jsfiddle.net/jtde9rxo/

如何让页面忽略此动画，而不是尝试随动画内容滚动？

这是 JSFiddle 中使用的代码：

<div class="page">
  <h1>
    <span class="word-swap-container">
      <span class="word-swap-mask">
        <span class="word-swap word-1">Apple</span>
        <span class="word-swap word-2">Orange</span>
        <span class="word-swap word-3">Pear</span>
        <span class="word-swap word-4">Apple</span>
      </span>
      <span class="word-swap-append">is a fruit</span>
    </span>
  </h1>
</div>

.page {
  padding: 150px 0 1000px;
}

.word-swap-container {
    display: block;
    overflow: hidden;
}

.word-swap-mask {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    text-align: right;
    height: 1.1em;
    line-height: 1;
}

.word-swap {
    display: block;
    height: 1.1em;
    line-height: 1;
}

.word-swap-append {
    display: inline-block;
    vertical-align: top;
    line-height: 1;
}

.word-swap.word-1 {
    animation: word-swap-move-1 3s linear infinite;
}
.word-swap.word-2 {
    animation: word-swap-move-2 3s linear infinite;
}
.word-swap.word-3 {
    animation: word-swap-move-3 3s linear infinite;
}
.word-swap.word-4 {
    animation: word-swap-move-4 3s linear infinite;
}

@keyframes word-swap-move-1 {
     0% {margin-top: 0em}
    27% {margin-top: 0em;opacity:1}
    33% {margin-top: -1.1em;opacity:0}
    60% {margin-top: -1.1em}
    66% {margin-top: -2.2em}
    93% {margin-top: -2.2em;opacity:0}
   100% {margin-top: -3.3em;opacity:1}
}

@keyframes word-swap-move-2 {
    27% {opacity:0}
    33% {opacity:1}
    60% {opacity:1}
    66% {opacity:0}
}

@keyframes word-swap-move-3 {
    60% {opacity:0}
    66% {opacity:1}
    93% {opacity:1}
   100% {opacity:0}
}

@keyframes word-swap-move-4 {
    93% {opacity:0}
   100% {opacity:1}
}

Answer 1

试试这个：

.word-swap-container {
display: block;
overflow: hidden;
position: absolute; // New entry

}

默认情况下 position 的值为 Static 和一个 position: static 的元素；没有以任何特殊方式定位；它总是按照页面的正常流程定位。

所以 Absolute 位置是相对于最近的定位祖先定位的（而不是相对于视口定位，就像固定的那样）。

祝你有美好的一天！

Answer 2

对您的代码进行以下编辑：

.page {
  /*padding: 150px 0 1000px;*/
}

.word-swap-container {
    position: absolute;
    display: block;

    top: 10%;
    left: 10%;
}

.word-swap-mask {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    text-align: right;
    height: 1.1em;
    line-height: 1;
}

.word-swap {
    display: block;
    height: 1.1em;
    line-height: 1;
}

.word-swap-append {
    display: inline-block;
    vertical-align: top;
    line-height: 1;
}

.word-swap.word-1 {
    animation: word-swap-move-1 3s linear infinite;
}
.word-swap.word-2 {
    animation: word-swap-move-2 3s linear infinite;
}
.word-swap.word-3 {
    animation: word-swap-move-3 3s linear infinite;
}
.word-swap.word-4 {
    animation: word-swap-move-4 3s linear infinite;
}

@keyframes word-swap-move-1 {
     0% {margin-top: 0em}
    27% {margin-top: 0em;opacity:1}
    33% {margin-top: -1.1em;opacity:0}
    60% {margin-top: -1.1em}
    66% {margin-top: -2.2em}
    93% {margin-top: -2.2em;opacity:0}
   100% {margin-top: -3.3em;opacity:1}
}

@keyframes word-swap-move-2 {
    27% {opacity:0}
    33% {opacity:1}
    60% {opacity:1}
    66% {opacity:0}
}

@keyframes word-swap-move-3 {
    60% {opacity:0}
    66% {opacity:1}
    93% {opacity:1}
   100% {opacity:0}
}

@keyframes word-swap-move-4 {
    93% {opacity:0}
   100% {opacity:1}
}

<div class="page">
  <h1>
    <span class="word-swap-container">
      <span class="word-swap-mask">
        <span class="word-swap word-1">Apple</span>
        <span class="word-swap word-2">Orange</span>
        <span class="word-swap word-3">Pear</span>
        <span class="word-swap word-4">Apple</span>
      </span>
      <span class="word-swap-append">is a fruit</span>
    </span>
  </h1>
</div>
      

完全移除滚动条，希望对您有所帮助。