指示CSS頁面上的滾動位置

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

基於捲軸的功能往往涉及CSS和JavaScript的一些定制混合物。那是因為根本沒有那麼多的本地功能可以做到這一點。但是，如果我們可以完成僅使用CSS的事情怎麼辦？

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

像這樣：

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

相反的情況應該相反：當向後滾動滾動時，指示器將遵循，偽裝回到肉眼未發現。

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

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

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

這是CSS混合模式發揮作用的地方。他們為我們提供了許多選擇來創建各種顏色融合的選擇。我要使用覆蓋值。這本質上是動態的。我不會深入解釋混合物（因為CSS-tricks Alamanac已經做得很好），但是考慮到此演示，我會說：當背景顏色為白色時，產生的前景顏色為白色；當背景是其他顏色時，所產生的顏色會更暗或更輕，具體取決於與之混合的顏色。

演示中的指示器停止是黑色的。但是，由於混合物，我們將它們視為白色，因為它們在白色背景上。當它們超過指示器容器元件（紫羅蘭色的可愛陰影）時，我們會看到一個深紫色的指示器停止，因為我們將指示器停止的黑色與指示器容器的紫色混合在一起。

從HTML開始：

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



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



<div>
 
</div>



<div> </div>



<div>
 
</div>



<div> </div>



<div>
 
</div>

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

這是CSS：

 .PassAgeStops {
 背景色：黑色； / *每個指示器停止都是黑色 */
 混合模式：覆蓋； / *這使其在白色背景上顯得白色 */
 寬度：33.3％； / *總共三個部分，因此每個部分為三分之一 */
 頂部：計算（1EM 3PX）;
}


＃通道， 
.PassAgeStops {
 身高：10px;
}


#passageWrapper，
.PassAgeStops {
 位置：粘性； / *容器和停止應粘在頂部 */
 z索引：1; / *確保指示器和停止保持在最前沿 */
}


#passage {
 背景：紫羅蘭； / *將與黑色融合以製作較深的紫色指示器 */
 保證金：0 0 20px 0;
}


#passageWrapper {
 背景色：白色； / *確保我們正在使用White隱藏指示器停止 */
 身高：40px;
 頂部：0px;
}


/*每個站將在達到最後一部分時將指示器容器寬度的三分之一移動以覆蓋整個物體。 */
。 }
。 }


/*更多樣式，等等。 */

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

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

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

這再次是演示：

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

以上是指示CSS頁面上的滾動位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！