不可思議的純 CSS 滾動進度條效果

收藏待读

不可思議的純 CSS 滾動進度條效果

結論先行,如何使用 CSS 實現下述滾動條效果?

不可思議的純 CSS 滾動進度條效果

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

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

OK,繼續。這個效果是我在業務開發的過程中遇到的一個類似的小問題。其實即便讓我藉助 Javascript ,我的第一反應也是,感覺很麻煩啊。所以我一直在想,有沒有可能只使用 CSS 完成這個效果呢?

不可思議的純 CSS 滾動進度條效果

分析需求

第一眼看到這個效果,感覺這個跟隨滾動動畫,僅靠 CSS 是不可能完成的,因為這裡涉及了頁面滾動距離的計算。

如果想只用 CSS 實現,只能另闢蹊徑,使用一些討巧的方法。

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

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

正常分析應該是這樣的,但是這就陷入了傳統的思維。進度條就只是進度條,接收頁面滾動距離,改變寬度。如果頁面滾動和進度條是一個整體呢?

實現需求

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

假設我們的頁面被包裹在  中,可以滾動的是整個 body,給它添加這樣一個從左下到到右上角的線性漸變:

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

那麼,我們可以得到一個這樣的效果:

不可思議的純 CSS 滾動進度條效果

Wow,黃色塊的顏色變化其實已經很能表達整體的進度了。其實到這裡,聰明的同學應該已經知道下面該怎麼做了。

我們運用一個偽元素,把多出來的部分遮住:

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

為了方便演示,我把上面白色底改成了黑色透明底,:

不可思議的純 CSS 滾動進度條效果

實際效果達成了這樣:

不可思議的純 CSS 滾動進度條效果

眼尖的同學可能會發現,這樣之後,滑到底的時候,進度條並沒有到底:

不可思議的純 CSS 滾動進度條效果

究其原因,是因為  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 的高度。再看看效果,完美:

不可思議的純 CSS 滾動進度條效果

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

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

不可思議的純 CSS 滾動進度條效果

最後

其實這只是非常牛逼的漸變非常小的一個技巧。更多你想都想不到的有趣的 CSS 你可以來這裡瞧瞧:

CSS-Inspiration — CSS靈感

更多精彩 CSS 技術文章匯總在我的  Github — iCSS ,持續更新,歡迎點個 star 訂閱收藏。

好了,本文到此結束,希望對你有幫助 🙂

如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

原文 : 博客園精華區

相關閱讀

免责声明:本文内容来源于博客園-原創精華區,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。