您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

CSS 修改滚动条样式

时间:02-23来源:作者:点击数:
  • 默认滚动条(MacWin)
    image.png
  • 修改样式
    // 滚动条主视图
    .page-content::-webkit-scrollbar {
      width: 8px;
      background: red;
    }
    // 滚动条进度条视图
    .page-content::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: green;
    }
    // 滚动条进度背景视图
    .page-content::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
      background: yellow;
    }
    
  • 案例效果
    image.png
    image.png
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门