溫馨提示×

滾動條如何設置

小云
153
2023-08-24 13:48:26
欄目: 編程語言

滾動條可以通過CSS進行設置。下面是一些常用的滾動條設置方法:

  1. 設置滾動條的寬度和顏色:
/* 水平滾動條 */
::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
/* 垂直滾動條 */
::-webkit-scrollbar {
height: 10px;
background-color: #f5f5f5;
}
  1. 設置滾動條的滑塊顏色及樣式:
/* 水平滑塊 */
::-webkit-scrollbar-thumb {
background-color: #888;
}
/* 垂直滑塊 */
::-webkit-scrollbar-thumb {
background-color: #888;
}
/* 懸停時的樣式 */
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* 點擊時的樣式 */
::-webkit-scrollbar-thumb:active {
background-color: #333;
}
  1. 設置滾動條軌道的樣式:
/* 水平軌道 */
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/* 垂直軌道 */
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
  1. 隱藏滾動條:
/* 隱藏滾動條 */
::-webkit-scrollbar {
width: 0;
background-color: transparent;
}

這些樣式只適用于WebKit內核的瀏覽器,如Chrome和Safari。其他瀏覽器可能有不同的樣式設置方法。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女