利用CSS美化,自定义滚动条样式,CSS代码分享

前端开发   发布日期:2023年05月24日   浏览次数:472

利用CSS美化,自定义滚动条样式,纯代码分享。flpm_box_danwei 为容器的ID,根据需要自行修改。

  1. <style>
  2. #flpm_box_danwei::-webkit-scrollbar,#right_box::-webkit-scrollbar {
  3. /*滚动条整体样式*/
  4. width : 5px; /*高宽分别对应横竖滚动条的尺寸*/
  5. height: 1px;
  6. }
  7. #flpm_box_danwei::-webkit-scrollbar-thumb,#right_box::-webkit-scrollbar-thumb {
  8. /*滚动条里面小方块*/
  9. border-radius: 5px;
  10. box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
  11. background : #ccc
  12. }
  13. #flpm_box_danwei::-webkit-scrollbar-track,#right_box::-webkit-scrollbar-track {
  14. /*滚动条里面轨道*/
  15. box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
  16. border-radius: 5px;
  17. background : #ededed;
  18. }
  19. </style>


以上就是利用CSS美化,自定义滚动条样式,CSS代码分享的详细内容,更多关于利用CSS美化,自定义滚动条样式,CSS代码分享的资料请关注九品源码其它相关文章!