###### tags: `CSS筆記`

# CSS Scrollerbar

<style>
.thumb{
width:20px;
height: 20px;
background:#28c7fa;
border-radius:50%;

}
.track{
width:20px;
height: 20px;
background:#a1eafb;
border-radius:50%;

}

.flex{
display : flex;
}

.scroll{
overflow-y:scroll;
height : 200px;
}

.scroll-stlyed{
height : 200px;
overflow-y:scroll;
}

.scroll-stlyed-color{
height : 200px;
overflow-y:scroll;
}

.scroll-stlyed::-webkit-scrollbar{
width: 1vw;
}
.scroll-stlyed::-webkit-scrollbar-thumb{
border-radius: 20px;
}
.scroll-stlyed::-webkit-scrollbar-track{
border-radius: 20px;
}

.scroll-stlyed-color::-webkit-scrollbar{
width: 1vw;
}
.scroll-stlyed-color::-webkit-scrollbar-thumb{
background-color: #28c7fa;
border-radius: 20px;
}
.scroll-stlyed-color::-webkit-scrollbar-track{
background-color: #a1eafb;
border-radius: 20px;
}
</style>

有時候在我們的網頁上會想要改變滾輪的樣式，這時候我們可以透過Webkit來修改滾輪的樣式。

在網頁的預設滾輪樣式如下圖

<div class="scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae laboriosam
nisi illo similique odio accusamus consequatur, minima voluptate quo magnam,
inventore doloremque itaque voluptatibus repellendus quos! Laudantium ex
velit nobis magni impedit doloribus odio aspernatur dolores, aut saepe vel
sunt sequi reprehenderit obcaecati accusamus maiores perspiciatis sint
eveniet optio praesentium. Libero esse magnam reiciendis rem ab id culpa
nulla ex nisi odit, totam et! Dolore dignissimos deserunt obcaecati rem
illum consequuntur, dolores tempore iure rerum magni sunt aliquam incidunt
asperiores voluptatum quas eveniet quos repellendus omnis eligendi
exercitationem sint iste debitis natus. Blanditiis minima aut totam vel
optio. Nihil, aliquam quidem quas magni facere dicta ut sint temporibus eius
dolores iste soluta reiciendis delectus omnis harum obcaecati minus odit nam
rem cupiditate numquam cum! Voluptas architecto accusantium maxime iste quos
laborum eius sed? Nostrum veritatis consectetur voluptate, aliquid maxime
quo. Quidem assumenda vitae, animi eveniet ex consequatur aliquid? Excepturi
vitae quia architecto nam, totam, sed nostrum harum eum cumque incidunt
officia accusantium ea tempora sunt. Dolore architecto hic, quae totam
recusandae odio suscipit est quas quaerat adipisci neque iure exercitationem
numquam quod laudantium ipsam nobis expedita itaque, unde accusamus corporis
maxime quia. Voluptatibus corrupti officia quis nam odio, reprehenderit
alias veniam molestias ullam ratione quia, dolores quaerat quam, repellendus
quae qui fugiat dolorem provident facilis eaque dolor libero. Iste eos
aspernatur ipsam, assumenda tenetur maxime harum vitae sequi magnam ducimus.
Beatae dolorem dignissimos aspernatur tempora quo non cum assumenda

</div>

<br>

這樣的樣式可能不是我們想要的，接著我們透過Webkit來修改樣式吧！

較常用的有 -webkit-scrollbar、-webkit-scrollbar-thumb、-webkit-scrollbar-track。

-webkit-scrollbar
: scrollbar主要是調整整體滾輪的樣式

-webkit-scrollbar-track
: track是滾輪軌道的樣式

-webkit-scrollbar-thumb
: thumb是滾輪bar的樣式

讓我們先直接使用上述兩個語法來調整滾輪樣式看看吧~

html::-webkit-scrollbar {
    width: 1vw;
}

html::-webkit-scrollbar-thumb {
    border-radius: 20px;
}

html::-webkit-scrollbar-track {
    border-radius: 20px;
}

調整完以後會發現，怎麼原本的滾輪消失了??

<div class="scroll-stlyed">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae laboriosam
nisi illo similique odio accusamus consequatur, minima voluptate quo magnam,
inventore doloremque itaque voluptatibus repellendus quos! Laudantium ex
velit nobis magni impedit doloribus odio aspernatur dolores, aut saepe vel
sunt sequi reprehenderit obcaecati accusamus maiores perspiciatis sint
eveniet optio praesentium. Libero esse magnam reiciendis rem ab id culpa
nulla ex nisi odit, totam et! Dolore dignissimos deserunt obcaecati rem
illum consequuntur, dolores tempore iure rerum magni sunt aliquam incidunt
asperiores voluptatum quas eveniet quos repellendus omnis eligendi
exercitationem sint iste debitis natus. Blanditiis minima aut totam vel
optio. Nihil, aliquam quidem quas magni facere dicta ut sint temporibus eius
dolores iste soluta reiciendis delectus omnis harum obcaecati minus odit nam
rem cupiditate numquam cum! Voluptas architecto accusantium maxime iste quos
laborum eius sed? Nostrum veritatis consectetur voluptate, aliquid maxime
quo. Quidem assumenda vitae, animi eveniet ex consequatur aliquid? Excepturi
vitae quia architecto nam, totam, sed nostrum harum eum cumque incidunt
officia accusantium ea tempora sunt. Dolore architecto hic, quae totam
recusandae odio suscipit est quas quaerat adipisci neque iure exercitationem
numquam quod laudantium ipsam nobis expedita itaque, unde accusamus corporis
maxime quia. Voluptatibus corrupti officia quis nam odio, reprehenderit
alias veniam molestias ullam ratione quia, dolores quaerat quam, repellendus
quae qui fugiat dolorem provident facilis eaque dolor libero. Iste eos
aspernatur ipsam, assumenda tenetur maxime harum vitae sequi magnam ducimus.
Beatae dolorem dignissimos aspernatur tempora quo non cum assumenda
</div>
<br>

這是因為一旦我們調整滾輪的樣式，原本的滾輪樣式就會全部被覆蓋，所以通常調整滾輪樣式的時候，會重新自訂一個新的滾輪樣式，我們先給thumb和track不同的背景顏色來看看效果如何吧。

<br>

html::-webkit-scrollbar {
    width: 1vw;
}

html::-webkit-scrollbar-thumb {
    background-color: #28c7fa;
    border-radius: 20px;
}

html::-webkit-scrollbar-track {
    background-color: #a1eafb;
    border-radius: 20px;
}

<div class="flex">
thumb和track的顏色分別為
<div class="thumb"></div>
<div class="track"></div>

</div>
<br>

通常scrollbar的width不會調成px，因為這樣縮放的時候width會固定，調為1或2vw較合適

<div class="scroll-stlyed-color">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae laboriosam
nisi illo similique odio accusamus consequatur, minima voluptate quo magnam,
inventore doloremque itaque voluptatibus repellendus quos! Laudantium ex
velit nobis magni impedit doloribus odio aspernatur dolores, aut saepe vel
sunt sequi reprehenderit obcaecati accusamus maiores perspiciatis sint
eveniet optio praesentium. Libero esse magnam reiciendis rem ab id culpa
nulla ex nisi odit, totam et! Dolore dignissimos deserunt obcaecati rem
illum consequuntur, dolores tempore iure rerum magni sunt aliquam incidunt
asperiores voluptatum quas eveniet quos repellendus omnis eligendi
exercitationem sint iste debitis natus. Blanditiis minima aut totam vel
optio. Nihil, aliquam quidem quas magni facere dicta ut sint temporibus eius
dolores iste soluta reiciendis delectus omnis harum obcaecati minus odit nam
rem cupiditate numquam cum! Voluptas architecto accusantium maxime iste quos
laborum eius sed? Nostrum veritatis consectetur voluptate, aliquid maxime
quo. Quidem assumenda vitae, animi eveniet ex consequatur aliquid? Excepturi
vitae quia architecto nam, totam, sed nostrum harum eum cumque incidunt
officia accusantium ea tempora sunt. Dolore architecto hic, quae totam
recusandae odio suscipit est quas quaerat adipisci neque iure exercitationem
numquam quod laudantium ipsam nobis expedita itaque, unde accusamus corporis
maxime quia. Voluptatibus corrupti officia quis nam odio, reprehenderit
alias veniam molestias ullam ratione quia, dolores quaerat quam, repellendus
quae qui fugiat dolorem provident facilis eaque dolor libero. Iste eos
aspernatur ipsam, assumenda tenetur maxime harum vitae sequi magnam ducimus.
Beatae dolorem dignissimos aspernatur tempora quo non cum assumenda

</div>

<br>

# 練習

現在我們來打造出像下圖一樣的scrollbar吧!


***程式碼如下***

***HTML***

<div class="bonus-scroller">
    <div class="bonus-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, minus
        totam. Eligendi, soluta consequatur expedita illum aut enim quasi ipsam.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, minus
        totam. Eligendi, soluta consequatur expedita illum aut enim quasi ipsam.
    </div>
</div>

***CSS***

.bonus-scroll{
    width: 400px;
    overflow-x: scroll;
}

.bonus-content {
    width: 600px;
}

.bonus-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.bonus-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(219, 219, 219, 1);
    border-radius: 20px;
}

<style>
.bonus-scroller{
width: 700px;
overflow-x: scroll;
}

.bonus-content {
width:900px;
}

.bonus-scroller::-webkit-scrollbar {
width: 8px;
height: 8px;
}

.bonus-scroller::-webkit-scrollbar-thumb {
background-color: rgba(219, 219, 219, 1);
border-radius: 20px;
}
</style>

<div class="bonus-scroller">
<div class="bonus-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, minus
totam. Eligendi, soluta consequatur expedita illum aut enim quasi ipsam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, minus
totam. Eligendi, soluta consequatur expedita illum aut enim quasi ipsam.
</div>

</div>