vue修改浏览器的滚动条样式

最新推荐文章于 2024-03-27 16:05:35 发布

公孙元二

最新推荐文章于 2024-03-27 16:05:35 发布

阅读量559

点赞数

分类专栏：个人笔记/备忘录 Vue2.x Css/Canvas/SVG/Elementui 文章标签： css vue 前端

本文链接：https://blog.csdn.net/Amnesiac666/article/details/111320524

版权

Vue2.x 同时被 3 个专栏收录

166 篇文章 9 订阅

订阅专栏

Css/Canvas/SVG/Elementui

144 篇文章 3 订阅

订阅专栏

个人笔记/备忘录

104 篇文章 4 订阅

订阅专栏

效果图（滚动条为灰色）：
在这里插入图片描述

在vue页面加上以下css：

<style scoped>
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    --webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgb(220, 220, 220);
    --webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(220,220,220,0.4);
}
</style>