CSS 彩虹滾動條

分類

建立時間: 2022年4月29日 21:47

更新時間: 2022年5月9日 20:32

說明

使用 html css javascript 實作網頁滾動條
需注意部分瀏覽器不支援，還有手機沒辦法隱藏原本的滾動條
我看了 Youtube 的教學影片(網址在參考連結)，並且稍微修改了一下程式
實作了彩虹滾動條，讓整個網站看起來更多元化了

預覽

截圖.png

實作

詳細的內容請看 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')
})

參考

觀看次數: 1032

htmlcssjavascriptrainbowscrollbarscrollbar彩虹滾動條彩虹滾動條

按讚追蹤 Enjoy 軟體 Facebook 粉絲專頁

每週分享資訊技術

Enjoy 享受軟體

一杯咖啡的力量，勝過千言萬語的感謝。

支持我一杯咖啡，讓我繼續創作優質內容，與您分享更多知識與樂趣！