防止在固定元素上方滚动

Question

我有一个完整的页面固定元素来显示“此页面正在加载”的 gif 图像。但是该页面的内容溢出了正文。用户可以在这个固定元素上滚动它。有没有一种CSS方法可以防止这种情况？我本可以抓住事件并通过 JS 阻止它。但是干净的 CSS 方式会很棒。

.page-loading {
  background: rgba($white, 0.7);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: all 0.5s;
  z-index: 14;

  &__image {
    height: 50px;
    width: 50px;
  }
}

我推荐了this。但我想从组件本身来控制它。（没有JS）

Answer 1

正如您已经提供的链接，您必须将overflow:hidden; 应用于您的身体。