溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用純CSS實現滾動進度條效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
如何使用 CSS 實現下述滾動條效果？
就是頂部黃色的滾動進度條，隨著頁面的滾動進度而變化長短。
第一眼看到這個效果，感覺這個跟隨滾動動畫，僅靠 CSS 是不可能完成的，因為這里涉及了頁面滾動距離的計算。
如果想只用 CSS 實現，只能另辟蹊徑，使用一些討巧的方法。
好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成這個效果。分析一下難點：
如何得知用戶當前滾動頁面的距離并且通知頂部進度條？
正常分析應該是這樣的，但是這就陷入了傳統的思維。進度條就只是進度條，接收頁面滾動距離，改變寬度。如果頁面滾動和進度條是一個整體呢？
不賣關子了，下面我們運用線性漸變來實現這個功能。
假設我們的頁面被包裹在 <body> 中，可以滾動的是整個 body，給它添加這樣一個從左下到到右上角的線性漸變：
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 的高度。再看看效果，完美：
關于“如何使用純CSS實現滾動進度條效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
