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

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

github：[vue-markdown][]

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

vue组件化开发

>>> *
      /* 设置滚动条的样式 */
    
      ::-webkit-scrollbar
        height 5px /*设置横向滚动条的高度*/
        width 5px /*设置纵向向滚动条宽带*/
        background-color: rgba(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

单纯css的代码如下

<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>

### 效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]

[vue-markdown]: https://github.com/zhaoxuhui1122/vue-markdown
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]: /images/20221024/e270bd65e3974f7bbb4b6e27036e6a6a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

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

相关阅读

相关 css美化浏览器滚动条

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

小灰灰/ 2024年04月17日 05:26/ 0 赞/ 91 阅读

相关滚动条美化

滚动条美化1 body { height: 2000px; width: 100

淡淡的烟草味﹌/ 2024年04月07日 12:26/ 0 赞/ 84 阅读

相关 elementplus全局美化滚动条vue

在全局style.css中引入以下代码 /修改全局的滚动条/ /滚动条的宽度/ ::-webkit-scrollbar { width: 8

雨点打透心脏的1/2处/ 2024年03月22日 14:55/ 0 赞/ 91 阅读

相关 css美化滚动条

::-webkit-scrollbar-track-piece { background-color: fff; -webkit-bor

淡淡的烟草味﹌/ 2023年01月15日 02:19/ 0 赞/ 148 阅读

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

github：[vue-markdown][] 下面是vue组件化中使用stylus语法其中`>>>` 是为了让组件内也生效 vue组件化开发 >>>

淩亂°似流年/ 2022年10月31日 13:37/ 0 赞/ 171 阅读

相关 QScrollArea qss样式表，美化滚动条

文章目录效果图如下：前言 QSS样式表代码效果图如下： ![在这里插入图片描述][397ecfc09a8e409da

女爷i/ 2022年09月17日 03:11/ 0 赞/ 532 阅读

相关用CSS美化你的滚动条

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

你的名字/ 2022年08月07日 14:56/ 0 赞/ 229 阅读

相关用CSS美化你的滚动条

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

矫情吗；*/ 2022年08月05日 16:19/ 0 赞/ 246 阅读

相关滚动条样式css

![在这里插入图片描述][20190702143854151.png] / 滚动条 / ::-webkit-scrollbar { width:

深藏阁楼爱情的钟/ 2021年12月18日 13:37/ 0 赞/ 446 阅读

相关 Windows系统HTML滚动条美化CSS样式

Windows系统下，滚动条的美化：这个一般是全局性的配置，如果需要不同的滚动条配置不同的样式，可以在每个滚动条样式前加个class设置即可。 ::-webk

- 日理万妓/ 2021年07月24日 13:50/ 0 赞/ 798 阅读