Question

例如，我有一个高度很高的网页，它有一个通常在滚动时起床的加载程序。但我喜欢那个装载机，尽管有滚动位置，它始终保持在中心位置。我怎么能这样做？

HTML

<div class="loader"></div>

CSS

body {
  height: 1000vh;
  margin: 0;
}

.loader:before,
.loader:after,
.loader {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #C74038;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #C74038;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #C74038;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #C74038;
  }
}

Answer 1

通常情况下，您可以通过position: fixed执行此操作，但是中心的边距技巧不再有效，因此您必须重新定位。

尝试将装载程序类更改为：

.loader {
  font-size: 10px;
  margin: 80px auto;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  position: fixed;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);  
}

PS：我也认为这里不需要translateZ(0)，因为你已经翻译了这个元素。如果您想知道：left: 50%确实将元素相对于视口居中，但只是它的左边缘。然后，translateX通过向左移动元素本身来抵消这一点，也是50％，但这次50％适用于元素宽度。因此，这应该完美地将您的元素作为中心。

PPS：如果你是downvote，请解释原因。谢谢。

Answer 2

使用position: fixed。这使其远离文档流并且相对于视口处于固定位置：

.loader {
  ...
  margin: 80px 50%;
  position: fixed;
  ...
}

如何在可滚动页面的中心修复元素？

2 个答案: