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

Question

我有一个CSS动画，坐在一个网页上，照顾自己的业务。动画通过改变第一个单词的页边距-顶部值来循环一些单词.

如果我滚动网页，使动画的中心是接触顶部的视图，该页面开始滚动与动画的运动。N.b.页面上还有其他项目，因此滚动条是必要的。

请参见此操作(在填充的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

对代码进行以下编辑：

​

.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>

​

完全移除滚动条，希望这有帮助。

Answer 2

试试这个：

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

}

默认情况下，位置的值是静态和带有位置的元素: static；不以任何特殊的方式定位；它总是根据页面的正常流定位。

因此，绝对的位置相对于最近的定位祖先(而不是相对于视图端口的位置，比如固定位置)。

祝你度过美好的一天！