自定义滚动条

方法一:
<div id="itemsBoxRight">
<div id="itemsBoxRightDiv"></div>
</div>
 
#itemsBoxRight {
  width: 42.69px;
  height: 29px;
  overflow-y: scroll;
}
/*滚动条整体样式*/
#itemsBoxRight::-webkit-scrollbar {
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
/*滚动条里面小方块*/
#itemsBoxRight::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #11af92;
  border-radius: 100px;
}
/*滚动条里面轨道*/
#itemsBoxRight::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.2);
}
 
 
方法二:
/* Firefox浏览器自定义滚动条样式 */
html {
scrollbar-color: #888 #f1f1f1; /* 设置滚动滑块和滚动轨迹的颜色 */
scrollbar-width: thin; /* 设置滚动条的宽度(可以设置为'auto', 'thin', 或 'none') */
}
posted @ 2020-10-21 10:12  米娅m  阅读(147)  评论(0编辑  收藏  举报