在實際專案中，我們難免會遇到內容過多產生滾動條的時候，比如這樣的：
預設情況下的滾動條不是很美觀，我們可以嘗試利用css來美化一下預設樣式。
（1）::-webkit-scrollbar 滾動的區域
可以給滾動的區域設定width、height、background、border等
（2）::-webkit-scrollbar-track
滾動條的滑軌背景顏色，可以用display讓起不顯示，也可以新增背景
（3）::-webkit-scrollbar-thumb
滑塊的顏色
（4）::-webkit-scrollbar-button
滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以新增背景，顏色改變顯示效果。
（5）::-webkit-scrollbar-corner
橫向滾動條和縱向滾動條相交處尖角的顏色
我們通過上述概念知道了怎樣去操作我們的滾動條，接下來，開始寫**：
（1）建立基本的網頁結構
（2）通過文件碎片化的方式動態向body標籤中新增元素
（3）加入css完成美化預設滾動條的目的
/* 給需要滾動的元素新增偽類選擇器
將寬度設定為0，滾動條就會隱藏
滾動條width、height、background、border
*/*::-webkit-scrollbar
/* 滾動條的滑軌背景顏色，可以用display讓起不顯示，也可以新增背景
顏色改變顯示效果
*/*::-webkit-scrollbar-track
/* 滑塊的顏色
*/* ::-webkit-scrollbar-thumb
/* 滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以新增背景，顏色改變顯示效果。 */
* ::-webkit-scrollbar-button
/* 橫向滾動條和縱向滾動條相交處尖角的顏色 */
* ::-webkit-scrollbar-corner
這段**可以用於vue專案中，因為專案中難免會出現不必要的滾動條。
css滾動條美化
el dialog body 設定滾動滑塊的寬高 el dialog body webkit scrollbar,el dialog body moz scrollbar,el dialog body ms scrollbar 設定滾動滑塊的樣式 還可以加 hover偽類 如div hover we...
滾動條美化
記一次滾動條美化 定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸 webkit scrollbar 定義滾動條軌道 track 和滑塊 thumb webkit scrollbar track,webkit scrollbar thumb 定義滾動條頂部 左側 的按鈕塊 webkit scrol...
css美化滾動條，以vue markdown為例
github vue markdown 下面是vue元件化中使用stylus語法 其中 是為了讓元件內也生效 vue元件化開發 設定滾動條的樣式 webkit scrollbar height 5px 設定橫向滾動條的高度 width 5px 設定縱向向滾動條寬頻 background color ...