CSS scrollbar滚动条Firefox/Chrome/Edge

绝地灬酷狼 2022-12-10 12:29 276阅读 0赞

CSS scrollbar滚动条Firefox/Chrome/Edge

20200926121629492.png_pic_center
效果如上图支持Firefox, Chrome, Edge

  1. .main_frame
  2. {
  4.     width:100%;
  5.     height:100%;
  6.     overflow-y:scroll;
  7.     background:url(/pic/bg.png);
  8.     /*Firefox*/
  9.     scrollbar-color:#0C6992 #0C6992;/*背景色和前景色*/
  10.     scrollbar-width:thin;/*实现没有上下箭头*/
  11. }
  12. /*Chrome/Edge*/
  13. .main_frame::-webkit-scrollbar
  14. {
  16.     width:5px;
  17. }
  18. .main_frame::-webkit-scrollbar-track
  19. {
  21.     border-radius:25px;
  22.     -webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2);
  23.     background:rgba(0, 0, 0, 0.2);
  24. }
  25. .main_frame::-webkit-scrollbar-thumb
  26. {
  28.     border-radius:15px;
  29.     -webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2);
  30.     background:rgba(0, 0, 0, 0.2);
  31. }

发表评论

表情：
评论列表 （有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

    相关 滚动条scrollbar

    页面滚动条 对于IE浏览器，可以单独设置滚动条样式，从而使其更加符合网站的整体设计。 滚动条组成 ： 3dlight、highlight、face、arrow、

    梦里梦外;梦里梦外;/ 0 赞/ 319 阅读

    相关 界面控件 - 滚动条ScrollBar

    界面是人机交互的门户，对产品至关重要。在界面开发中只有想不到没有做不到的，有好的想法，当然要尝试着做出来。对滚动条的扩展，现在有很多类是的例子。 VS2015的代码编辑是非常

    矫情吗；*矫情吗；*/ 0 赞/ 421 阅读