如何修復可滾動頁面中心的元素？

例如，我有一個高度很高的網頁，它有一個通常在滾動時起牀的加載程序。但是，我希望那個裝載機始終保持在中心位置，儘管滾動位置。我怎樣才能做到這一點？如何修復可滾動頁面中心的元素？

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

如何修復可滾動頁面中心的元素？

回答

相關問題