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

您所在的位置：网站首页 › css设置阴影样式怎么设置的 › css：全局设置滚动条样式：鼠标移入才显示

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

2023-07-11 20:22| 来源: 网络整理| 查看: 265

创建一个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; }

【本文地址】

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

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

今日新闻

推荐新闻