css美化滚动条，以vue-markdown为例

淩亂°似流年 2022-10-31 13:37 268阅读 0赞

github：vue-markdown

下面是vue组件化中使用stylus语法
其中>>> 是为了让组件内也生效

vue组件化开发

  1. >>> *
  2.   /* 设置滚动条的样式 */
  4.   ::-webkit-scrollbar
  5.     height 5px /*设置横向滚动条的高度*/
  6.     width 5px /*设置纵向向滚动条宽带*/
  7.     background-color: rgba(0, 0, 0, .3)
  9.   ::-webkit-scrollbar-track
  10.     display none
  11.     border-radius 10px
  13.   /* 滚动条滑块样式 */
  15.   ::-webkit-scrollbar-thumb
  16.     background-color hsla(0, 0%, 100%, .5)
  17.     border-radius 10px
  19.   ::-webkit-scrollbar-track-piece
  20.     border-radius 10px

单纯css的代码如下

  1. <style> /* 设置滚动条的样式 */ *::-webkit-scrollbar { height: 5px; /*设置横向滚动条的高度*/ width: 5px; /*设置纵向向滚动条宽带*/ background-color: rgba(0, 0, 0, 0.3); } *::-webkit-scrollbar-track { display: none; border-radius: 10px; } /* 滚动条滑块样式 */ *::-webkit-scrollbar-thumb { background-color: hsla(0, 0%, 100%, .5); border-radius: 10px; } *::-webkit-scrollbar-track-piece { border-radius: 10px; } </style>

效果

在这里插入图片描述

发表评论

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

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

相关阅读

    相关 css美化浏览器滚动条

    独使用css的方法虽然简单，但只有chrome兼容好，ie只能改滚动条颜色，火狐不支持css修改 1.先看chrome滚动条每部分的名字（直接引用的[https://w...

    小灰灰小灰灰/ 0 赞/ 190 阅读

    相关 用CSS美化你的滚动条

    本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色，调整它们的外形，适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS

    你的名字你的名字/ 0 赞/ 330 阅读

    相关 用CSS美化你的滚动条

     本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色，调整它们的外形，适配你对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS

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