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

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

/*  不显示滚动条 */
  ::-webkit-scrollbar
   {
       display: none!important;
   }

 /*  鼠标hover的时候才显示滚动条 */
  /*定义滚动条高宽及背景
    高宽分别对应横竖滚动条的尺寸*/
  :hover::-webkit-scrollbar
   {
       display: block!important;
       width:8px;
       height:8px;
       background-color:transparent;
   }

   /*定义滑块
    内阴影+圆角*/
   ::-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设置滚动条：

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

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