滾動條css樣式修改

Chrome 71.0.3578.99以上版本適用,以下不適用:

/* 设置滚动条的样式 */
.content_area ul::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
.content_area ul::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.8);
border-radius:10px;
background:rgba(0, 0, 0, .8);
}
/* 滚动条滑块 */
.content_area ul::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(255,255,255) !important;
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
.content_area ul::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
}

safari瀏覽器可用niceScroll.js代替。

案例:Chrome 用css修改,再寫userAgent,safari用niceScroll.js。

/* 滚动条ie */
.modal-body{
  scrollbar-base-color: #144190;
  scrollbar-face-color: #ffda2e;
  scrollbar-3dlight-color: #144190;
  scrollbar-highlight-color: #144190;
  scrollbar-track-color: #144190;
  scrollbar-shadow-color: #144190;
  scrollbar-dark-shadow-color: #144190;
}

留言

這個網誌中的熱門文章

PHP讀資料庫的資料,保留換行及空格

CSS animation 簡寫&好用的工具

使陣列裡的數值隨機重新排序