CSS 彩虹滾動條
分類
建立時間: 2022年4月29日 21:47
更新時間: 2022年5月9日 20:32
說明
使用 html css javascript 實作網頁滾動條
需注意部分瀏覽器不支援,還有手機沒辦法隱藏原本的滾動條
我看了 Youtube 的教學影片(網址在參考連結),並且稍微修改了一下程式
實作了彩虹滾動條,讓整個網站看起來更多元化了
預覽
實作
詳細的內容請看 Youtube 的教學影片,以下附上我修改後的版本
要使用的彩虹滾動條 html
以下以 index.html 當範例
記得網頁高度要夠高,才能看到彩虹滾動條效果
index.html
<!DOCTYPE html>
<html>
<head>
<link href="rainbow_scroll_bar/rainbowScrollBar.css" rel="stylesheet">
<script src="rainbow_scroll_bar/rainbowScrollBar.js"></script>
</head>
<body>
<div id="rainbow-scroll-bar"></div>
</body>
</html>
rainbow_scroll_bar/rainbowScrollBar.css
::-webkit-scrollbar {
width: 0;
}
#rainbow-scroll-bar {
animation: rainbow-scroll-bar 5s linear infinite;
background: linear-gradient(to top, #008aaf, #00ffe7);
position: fixed;
right: 0;
top: 0;
width: 5px;
/* 若 z 軸太低可以自行調整 */
z-index: 1;
}
#rainbow-scroll-bar::before {
background: linear-gradient(to top, #008aaf, #00ffe7);
content: '';
filter: blur(10px);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#rainbow-scroll-bar::after {
background: linear-gradient(to top, #008aaf, #00ffe7);
content: '';
filter: blur(30px);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
@keyframes rainbow-scroll-bar {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
rainbow_scroll_bar/rainbowScrollBar.js
let rainbowScrollBar
window.addEventListener('scroll', (event) => {
if (document.readyState !== 'complete') {
return
}
const totalHeight = document.body.scrollHeight - window.innerHeight
const rainbowScrollBarHeight = (window.scrollY / totalHeight) * 100
rainbowScrollBar.style.height = rainbowScrollBarHeight + '%'
})
window.addEventListener('load', (event) => {
rainbowScrollBar = document.getElementById('rainbow-scroll-bar')
})
參考
觀看次數: 990
htmlcssjavascriptrainbowscrollbarscrollbar彩虹滾動條彩虹滾動條
一杯咖啡的力量,勝過千言萬語的感謝。
支持我一杯咖啡,讓我繼續創作優質內容,與您分享更多知識與樂趣!