如何避免CSS动画彩屑元素触发页面滚动条显示？

核心原因 #

用position: relative的元素，哪怕通过transform做了位移，它依然属于文档流的一部分。当元素向下移动超出视口范围时，浏览器会把它算进页面可滚动区域，自然就触发了滚动条。

可行解决方案 #

方法1：改用position: fixed定位 #

把彩屑元素改成固定定位，让它脱离文档流，移动时就不会影响页面滚动区域的计算了，这也是最适合装饰性彩屑的方案：

@keyframes example {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(3000px);
  }
}

.falling-block {
  position: fixed; /* 替换原来的relative */
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

如果需要彩屑从页面顶部特定位置开始下落，还可以加个top: 0;之类的属性调整初始位置。

方法2：给父容器（或body）设置overflow: hidden #

如果你的页面本身不需要滚动功能，可以给body加上overflow: hidden来强制隐藏滚动条，但这种方法会限制页面正常的滚动需求，只适合固定高度的页面场景：

body {
  overflow: hidden;
}

方法3：position: absolute配合父容器定位 #

如果彩屑需要相对于某个父元素定位，可以把父元素设为position: relative，彩屑设为absolute，同时给父容器加overflow: hidden，让容器内部超出的内容不影响页面滚动：

.parent-container {
  position: relative;
  height: 100vh; /* 占满当前视口高度 */
  overflow: hidden;
}

.falling-block {
  position: absolute;
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

推荐代码示例（方法1） #

HTML：

hello world
<div class="falling-block">
 falling
</div>

CSS：

@keyframes example {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(3000px);
  }
}

.falling-block {
  position: fixed;
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

内容的提问来源于stack exchange，提问作者Speed Fox