设置滚动条样式或隐藏滚动条

小曲曲

已于 2023-04-24 11:03:29 修改

阅读量445

点赞数

分类专栏： vue jQuery PC 文章标签：前端

于 2019-10-28 18:43:57 首次发布

本文链接：https://blog.csdn.net/weixin_43848576/article/details/102786347

版权

vue 同时被 3 个专栏收录

136 篇文章 3 订阅

订阅专栏

21 篇文章 1 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

隐藏滚动条

body::-webkit-scrollbar {
  display: none;
}

设置滚动条样式

在这里插入图片描述

.bar {
  height: 78vh; //必须有高
  overflow-x: auto; // 树横向滚动条只对一级节点有用
  overflow-y: auto;
}

.bar::-webkit-scrollbar {
  width: 4px; // 宽度
}

/* 滚动槽的样式设置 */
.bar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(238, 246, 253, 0.5); // 滚动槽颜色
}

/* 滚动条滑块的样式设置 */
.bar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgb(158, 203, 255); // 滚动条颜色
}

.bar::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}