滾動條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;
}

發表迴響