好看的滚动条样式 css改变默认滚动条样式

迷南。 2022-03-22 02:18 817阅读 0赞

通过css改变滚动条样式

可修改滚动条css：

  1. ::-webkit-scrollbar — 整个滚动条.
  2. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  3. ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  4. ::-webkit-scrollbar-track — 滚动条轨道.
  5. ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  6. ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  7. ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

例子：给 class=”left-nav”的div,修改滚动条样式

  1. .left-nav::-webkit-scrollbar { 
  2.     width: 4px;
  3. }
  4. .left-nav::-webkit-scrollbar-thumb { 
  5.     border-radius: 10px;
  6.     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  7.     background: #666666;
  8. }
  9. .left-nav::-webkit-scrollbar-track{ 
  10.     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  11.     border-radius: 0;
  12.     background-color: #f5f5f5;
  13. }

发表评论

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

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

相关阅读