时间戳

首页 > 解决方案 > 如何防止我的 CSS 动画使我的页面滚动？

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

问题描述

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

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

查看实际操作（填充 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}
}

标签： htmlcssanimationbrowserscroll

解决方案

尝试这个：

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

}

默认情况下，位置的值是静态的，并且位置为：静态的元素；没有以任何特殊方式定位；它总是按照页面的正常流程定位。

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

祝你有美好的一天！

推荐阅读