使用position: fixed的<div>却不禁用页面滚动的问题（CSS）

问题出在你的fixed定位噪点层默认会拦截所有鼠标/触摸交互事件，导致页面底层内容无法接收滚动指令。fixed元素的层级高于普通流内容，且默认pointer-events: auto，会阻断下层元素的事件触发。

修复方案 #

给.noise类添加pointer-events: none属性，让噪点层不捕获任何交互事件，事件会直接穿透到下层页面内容：

.noise {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('../img/noise.png') repeat 0 0;
  animation: bg-animation .2s infinite;
  opacity: .5;
  pointer-events: none; /* 关键修复代码 */
} 

@keyframes bg-animation {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

原理说明 #

pointer-events: none会让元素完全忽略鼠标、触摸等交互行为，所有点击、滚动操作都会直接穿过该元素作用到下层内容上，同时不会影响噪点动画的视觉效果。

如果后续页面中有需要交互的fixed元素（比如弹窗），只需给这些元素设置更高的z-index值，且不添加pointer-events: none，就能保证弹窗正常交互，噪点层的视觉效果也不受影响。

内容的提问来源于stack exchange，提问作者Jacob Callesen