難以想象的純 CSS 滾動進度條效果

時間 2019-11-05

標籤難以想象 css 滾動進度效果欄目 CSS 简体版

原文原文鏈接

問題先行，如何使用 CSS 實現下述滾動條效果？css

就是頂部黃色的滾動進度條，隨着頁面的滾動進度而變化長短。html

在繼續閱讀下文以前，你能夠先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，可否巧妙的實現上述效果。git

OK，繼續。這個效果是我在業務開發的過程當中遇到的一個相似的小問題。其實即使讓我藉助 Javascript ，個人第一反應也是，感受很麻煩啊。因此我一直在想，有沒有可能只使用 CSS 完成這個效果呢？github

分析需求

第一眼看到這個效果，感受這個跟隨滾動動畫，僅靠 CSS 是不可能完成的，由於這裏涉及了頁面滾動距離的計算。動畫

若是想只用 CSS 實現，只能另闢蹊徑，使用一些討巧的方法。ui

好，下面就藉助一些奇技淫巧，使用 CSS 一步一步完成這個效果。分析一下難點：spa

如何得知用戶當前滾動頁面的距離而且通知頂部進度條？

正常分析應該是這樣的，可是這就陷入了傳統的思惟。進度條就只是進度條，接收頁面滾動距離，改變寬度。若是頁面滾動和進度條是一個總體呢？3d

實現需求

不賣關子了，下面咱們運用線性漸變來實現這個功能。code

假設咱們的頁面被包裹在 <body> 中，能夠滾動的是整個 body，給它添加這樣一個從左下到到右上角的線性漸變：cdn

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}
複製代碼

那麼，咱們能夠獲得一個這樣的效果：

Wow，黃色塊的顏色變化其實已經很能表達總體的進度了。其實到這裏，聰明的同窗應該已經知道下面該怎麼作了。

咱們運用一個僞元素，把多出來的部分遮住：

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}
複製代碼

爲了方便演示，我把上面白色底改爲了黑色透明底，：

實際效果達成了這樣：

眼尖的同窗可能會發現，這樣以後，滑到底的時候，進度條並無到底：

究其緣由，是由於 body 的線性漸變高度設置了整個 body 的大小，咱們調整一下漸變的高度：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}
複製代碼

這裏使用了 calc 進行了運算，減去了 100vh，也就是減去一個屏幕的高度，這樣漸變恰好在滑動到底部的時候與右上角貼合。

而 + 5px 則是滾動進度條的高度，預留出 5px 的高度。再看看效果，完美：

至此，這個需求就完美實現拉，算是一個不錯的小技巧，完整的 Demo：

CodePen Demo -- 使用線性漸變實現滾動進度條