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

例如，我有一个高度很高的网页，它有一个通常在滚动时起床的加载程序。但是，我希望那个装载机始终保持在中心位置，尽管滚动位置。我怎样才能做到这一点？如何修复可滚动页面中心的元素？

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; 
    } 
}

来源

2015-12-02 Alexander Shmatko

通常情况下，您可以通过position: fixed做到这一点，但随后的保证金招中心不工作了，所以你必须接近。

试着改变你Loader类到这个：

.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)，因为你已经平移X这个元素。如果您想知道：left: 50%确实将元素相对于视口居中，但只有左边缘。然后translateX通过将元素自身移动到左侧来抵消这一点，也是50％，但这次50％适用于元素宽度。这应该完美地将你的元素作为结果的中心。

PPS：如果您不满意，请解释原因。谢谢。

来源

2015-12-02 21:01:20

我确定它只是一个复制粘贴错误，但你仍然有'位置：相对'，正在被'position：fixed'覆盖。 – AtheistP3ace

是啊，你说得对，我忽略了“立场：亲戚”，但它应该仍然有效，因为后者的规则是优先的。虽然修正了它。 –

是的，它仍然适用于它！ =] – AtheistP3ace

使用position: fixed。这使得它的文档流，并在相对固定的位置，以视：

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

来源

2015-12-02 21:00:17 AtheistP3ace

这实际上并不居中加载器。 –

不是不完美。我主要回答了为什么当我滚动时不能保持固定的直接问题。 – AtheistP3ace

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

回答

相关问题