滾動是我們在網(wǎng)上都知道並在網(wǎng)絡(luò)上做的事情，以至於它是一種期望甚至習(xí)慣，例如刷牙。這可能就是為什麼我們不太考慮設(shè)計滾動體驗(yàn)的原因 - 這是一個眾所周知的基本功能。實(shí)際上，流行的“沒有折疊”的話是從人們知道如何滾動的想法中出現(xiàn)的，並且沒有人不會陷入困境的任意線。

基於捲軸的功能往往涉及CSS和JavaScript的一些定制混合物。那是因?yàn)楦緵]有那麼多的本地功能可以做到這一點(diǎn)。但是，如果我們可以完成僅使用CSS的事情怎麼辦？

以CSS為例，以巧妙的水平滾動條為例。我想做類似的事情，但要指示滾動的部分，而不是捕獲連續(xù)的滾動。換句話說，我只想在達(dá)到頁面的某個部分時增加滾動過程中指示器的長度。

像這樣：

這是我的計劃：每個部分都帶有一個無法檢測到的指標(biāo)，直到到達(dá)屏幕頂部為止。這就是通過更改顏色並堅持在視口頂部看到的地方。

相反的情況應(yīng)該相反：當(dāng)向後滾動滾動時，指示器將遵循，偽裝回到肉眼未發(fā)現(xiàn)。

這有兩個關(guān)鍵部分。首先是指示器在屏幕頂部附近時更改顏色。第二個是要使指示器保持在屏幕頂部，並且只有在將其部分向下滾動到屏幕上時才會下降。

第二個很容易做到：我們使用位置：粘性；關(guān)於我們的元素。滾動頁面時，粘性元素會粘在其父容器內(nèi)的屏幕上的給定位置。

這使我們變成了不斷變化的顏色。由於HTML文檔的背景默認(rèn)為白色，因此我將白色作為演示的基本顏色。這意味著，當(dāng)指示器在基本顏色上時，它應(yīng)該看起來為白色，並在屏幕頂??部的指示燈欄上轉(zhuǎn)向其他顏色。

這是CSS混合模式發(fā)揮作用的地方。他們?yōu)槲覀兲峁┝嗽S多選擇來創(chuàng)建各種顏色融合的選擇。我要使用覆蓋值。這本質(zhì)上是動態(tài)的。我不會深入解釋混合物（因?yàn)镃SS-tricks Alamanac已經(jīng)做得很好），但是考慮到此演示，我會說：當(dāng)背景顏色為白色時，產(chǎn)生的前景顏色為白色；當(dāng)背景是其他顏色時，所產(chǎn)生的顏色會更暗或更輕，具體取決於與之混合的顏色。

演示中的指示器停止是黑色的。但是，由於混合物，我們將它們視為白色，因?yàn)樗鼈冊诎咨尘吧稀．?dāng)它們超過指示器容器元件（紫羅蘭色的可愛陰影）時，我們會看到一個深紫色的指示器停止，因?yàn)槲覀儗⒅甘酒魍Ｖ沟暮谏c指示器容器的紫色混合在一起。

從HTML開始：

 <div>
 <strong>部分滾動?</strong>
 
 <div> </div>
</div>
?

<div class="passageStops"> </div>
?

<div>
 
</div>
?

<div> </div>
?

<div>
 
</div>
?

<div> </div>
?

<div>
 
</div>

很簡單，對嗎？頂部有一個粘稠的容器，當(dāng)它們到達(dá)頂部時，可以容納指示器。從那裡開始，我們有三個內(nèi)容的內(nèi)容，每個部分都帶有一個指示器，該指示器將用指示器粘在頂部並與之融合。

這是CSS：

 .PassAgeStops {
 背景色：黑色； / *每個指示器停止都是黑色 */
 混合模式：覆蓋； / *這使其在白色背景上顯得白色 */
 寬度：33.3％； / *總共三個部分，因此每個部分為三分之一 */
 頂部：計算（1EM 3PX）;
}
?
＃通道，?
.PassAgeStops {
 身高：10px;
}
?
#passageWrapper，
.PassAgeStops {
 位置：粘性； / *容器和停止應(yīng)粘在頂部 */
 z索引：1; / *確保指示器和停止保持在最前沿 */
}
?
#passage {
 背景：紫羅蘭； / *將與黑色融合以製作較深的紫色指示器 */
 保證金：0 0 20px 0;
}
?
#passageWrapper {
 背景色：白色； / *確保我們正在使用White隱藏指示器停止 */
 身高：40px;
 頂部：0px;
}
?
/*每個站將在達(dá)到最後一部分時將指示器容器寬度的三分之一移動以覆蓋整個物體。 */
。 }
。 }
?
/*更多樣式，等等。 */

指示器（.PassAgeStops）是黑色的。但是，當(dāng)覆蓋層模式與其下面的白色背景融合時，它們使它們顯得白色。由於有三個部分，因此每個指標(biāo)寬度為三分之一。

指標(biāo)具有位置：粘性；具有最高距離值。這意味著指示器一旦從屏幕頂部到達(dá)計算的位置就會粘貼。發(fā)生這種情況時，與紫羅蘭色指示器容器相結(jié)合的黑色指示器使它們看起來是黑暗的紫羅蘭色，代表頁面上的新滾動位置。

反向也是正確的。當(dāng)指示器失去其粘性位置時，它將從指示欄的紫羅蘭背景移動到頁面的白色背景，再次將其隱藏起來……就像它永遠(yuǎn)不會存在！

這再次是演示：

就是這樣。您可以通過具有另一種混合模式的非白色背景或用於指示欄或停止的梯度來進(jìn)一步實(shí)驗(yàn)。

以上是指示CSS頁面上的滾動位置的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！