用CSS客製化滾動條
1.原始的視窗畫面如下圖:文字過多，視窗會拉得很長，我們要先將視窗的div寫CSS:
max-height: 319px;
overflow-y: overlay;
這樣視窗就會如CSS所設定的，文字就算過多，最大高度(max-height)也會被設定在319px;
而overflow-y: overlay可以因應溢出的文字讓視窗產生滾動條，如下圖
2.改變滾動條的樣式:對視窗div的css加上:
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-button {
background: transparent;
border-radius: 4px;
}
::-webkit-scrollbar-track-piece {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.4);
border: 1px solid slategrey;
}
::-webkit-scrollbar-track {
box-shadow: transparent;
}
Scss的架構如下圖(紅框處)
這樣可以很明顯地看到滾動條的樣式和剛剛的不一樣了
3.逐一解說:
::-webkit-scrollbar可以調整滾動條的寬度(如下圖)
&::-webkit-scrollbar {
width: 50px;
}
::-webkit-scrollbar-button可以調整滾動條和視窗上下間距的樣式，如下圖紅框處。
&::-webkit-scrollbar-button {
background: blue;
border-radius: 4px;
}
如果要讓它看不見background: transparent; 就可以了
::-webkit-scrollbar-track-piece可以調整滾動條背後區塊的樣式，如下圖紅框處。
&::-webkit-scrollbar-track-piece {
background: yellow;
}
如果要讓它看不見background: transparent; 就可以了
::-webkit-scrollbar-thumb可以調整滾動條滑塊的樣式，如下圖紅框處。
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(197, 24, 145, 0.4);
border: 1px solid #000;
}
::-webkit-scrollbar-track可以調整滾動條軌道的樣式(如下圖藍色陰影)
&::-webkit-scrollbar-track {
box-shadow: 8px 8px 10px 10px rgb(35, 186, 197);
}
若不需要陰影box-shadow: none 就可以了
參考資料https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar
