css：全局设置滚动条样式：鼠标移入才显示

粉末的沉淀

已于 2023-07-23 21:52:49 修改

阅读量3.6k

点赞数

分类专栏： css 前端开发文章标签： css 前端

于 2023-07-07 17:34:21 首次发布

本文链接：https://blog.csdn.net/lilycheng1986/article/details/131601684

版权

前端开发同时被 2 个专栏收录

61 篇文章 6 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

创建一个css文件，设置全局滚动条样式，鼠标移入时才显示滚动条：

// 全局设置滚动条样式
  /*定义滚动条高宽及背景
    高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar
   {
       width:8px;
       height:8px;
       background-color:transparent;
   }

   /*定义滑块
    内阴影+圆角*/
	 /*  鼠标hover的时候才显示滚动条 */
   :hover::-webkit-scrollbar-thumb
   {
       border-radius:5px;
       -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);
       background-color:rgba(0,0,0,0.2);
   }

全局引入该css文件即可。

需要注意的是，如果容器想要带滚动条，那么它本身要设置滚动overflow: auto;

否则全局设置滚动条也是无效的。

比如antd的table设置滚动条：

<a-table id="dataflowTable" ref="table" size="middle" :scroll="{x:true,y:350}" bordered :columns="columns"
          :pagination="false" :dataSource="dataSource">

比如普通容器设置滚动条：

.imageview-box {
    width: 715px;
    height: 470px;
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap:wrap;
  }