CSS滾動條樣式修改 && 真！全屏

css3能夠自定義滾動條樣式，今天發現了一個花式玩法，一塊兒看看？ 以前寫過網頁時滾動條時是否是都這個樣子的呢

這個滾動條好看麼？

廢話確定很差看！ 若是設計溼給個帶背景的設計圖，又當如何呢？

是否是更醜了！

前方高能登場！非戰鬥人員請火速避開！

請注意第二張圖並不是滾動條不見了，是設置了與背景色同色，（是否是畫蛇添足了，用戶體驗去哪了！）

是否是美觀了很多？

css代碼奉上

body {
  background: #06b0b9;
}
::-webkit-scrollbar {
        width: 10px;
        height: 1px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: none;
  background: hsl(183, 97%, 27%);
  -webkit-box-shadow: none;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  border-radius: 10px;
  background: #06b0b9;
  -webkit-box-shadow: none;
}
複製代碼

查了一下兼容表，兼容性我不說啥了(谷谷大佬)(這個表我都想刪了)

更,,,

看官提示,火狐IE不行,親測火狐確實不行,那丫的不支持,

不過ie支持別的方法實現,不過略顯不完美

body {
  scrollbar-arrow-color: #06b0b9;
  /*三角箭頭的顏色*/
  scrollbar-face-color: hsl(183, 97%, 27%);
  /*立體滾動條的顏色（包括箭頭部分的背景色）*/
  scrollbar-3dlight-color: #06b0b9;
  /*立體滾動條亮邊的顏色*/
  scrollbar-highlight-color: #06b0b9;
  /*滾動條的高亮顏色（左陰影？）*/
  scrollbar-shadow-color: #06b0b9;
  /*立體滾動條陰影的顏色*/
  scrollbar-darkshadow-color: #06b0b9;
  /*立體滾動條外陰影的顏色*/
  scrollbar-track-color: #06b0b9;
  /*立體滾動條背景顏色*/
  scrollbar-base-color: #06b0b9;
  /*滾動條的基色*/
}
複製代碼

不過只有今天還有個發現,彷佛能夠實現全屏背景圖

正常狀況下這個樣子

別光顧着看人,看右邊,這能能知足麼?

昨天情人節都怎麼過的啊,朋友圈彷佛一片和諧

迴歸正題

這樣是否是好了很多?(月餅一隻,玄機不會找我要版權吧?)

body,
html {
  width: 100vw;
}

body {
  /* background: #06b0b9; */
  background: url(01.jpg) no-repeat center;
  background-size: 100% 100%;
}

::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: hsl(183, 97%, 27%);
  -webkit-box-shadow: none;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
}
複製代碼

敬請各位看官多多斧正。就是想到一種思路,分享出來,沒別的意思,我自認爲天資通常,因此諸位師兄中必有武功高強,天資聰慧者,望輕拍磚