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

Question

I have a CSS animation that sits on a page minding its own business. The animation loops through some words by changing the margin-top value of the first word.

If I scroll the webpage so that the center of the animation is touching the top of the viewport, the page begins to scroll with the movement of the animation. Nb The page has other items on it so the scrollbar is necessary.

See this in action (animation in a padded div to emulate a scrollable page): https://jsfiddle.net/jtde9rxo/

How can I make the page ignore this animation, rather than it trying to scroll with the animation's contents?

Here's the code used in the 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

Try This:

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

}

By default the value of position is Static and An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page .

So the position Absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

Have a Great Day!

Answer 2

Make the following edits to your code:

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

Removes scroll bar entirely, hope this helps.