css修改浏览器默认滚动条样式（前端css设置浏览器滚动条宽度）

25-01-23 24

本文将分享css修改浏览器默认滚动条样式的详细内容，并且还将对前端css设置浏览器滚动条宽度进行详尽解释，此外，我们还将为大家带来关于CSS-修改滚动条样式、CSS修改滚动条样式、css修改默认滚动条

本文将分享css修改浏览器默认滚动条样式的详细内容，并且还将对前端css设置浏览器滚动条宽度进行详尽解释，此外，我们还将为大家带来关于CSS - 修改滚动条样式、CSS 修改滚动条样式、css 修改默认滚动条样式、css 如何修改滚动条样式的相关知识，希望对你有所帮助。

本文目录一览：

css修改浏览器默认滚动条样式（前端css设置浏览器滚动条宽度）
CSS - 修改滚动条样式
CSS 修改滚动条样式
css 修改默认滚动条样式
css 如何修改滚动条样式

css修改浏览器默认滚动条样式（前端css设置浏览器滚动条宽度）

写过挺多项目都需要改变滚动条的默认样式并不想单独下载和引入插件因此纯css修改默认滚动条的样式这次算统一整理下方法，直接上代码。

&::-webkit-scrollbar {
  // 滚动条的背景
  width: 16px;
  background: #191a37;
  height: 14px;
}

&::-webkit-scrollbar-track,&::-webkit-scrollbar-thumb {
  border-radius: 999px;
  width: 20px;
  border: 5px solid transparent;
}

&::-webkit-scrollbar-track {
  Box-shadow: 1px 1px 5px #191a37 inset;
}

&::-webkit-scrollbar-thumb {
  //滚动条的滑块样式修改
  width: 20px;
  min-height: 20px;
  background-clip: content-Box;
  Box-shadow: 0 0 0 5px #464f70 inset;
}

&::-webkit-scrollbar-corner {
  background: #191a37;
}

佛山vi设计https://www.houdianzi.com/fsvi/ 豌豆资源搜索大全https://55wd.com

下边这个很精简。值得一试

&::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}

&::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

&:hover::-webkit-scrollbar-thumb {
  background: hsla(0,0%,53%,0.4);
}

&:hover::-webkit-scrollbar-track {
  background: hsla(0,0.1);
}

这个的优点在于鼠标移上才会显示修改的滚动条体验很好

隐藏某轴的滚动条代码写法：

overflow-x:hidden;

总结

以上是小编为你收集整理的css修改浏览器默认滚动条样式全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

CSS - 修改滚动条样式

::-webkit-scrollbar — 整个滚动条.

::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).

::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.

::-webkit-scrollbar-track — 滚动条轨道.

::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.

::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.

::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

/* 整个滚动条 */
::-webkit-scrollbar { 
    width:20px; 
    height:20px; 
    background-color:#F5F5F5; 
}
/* 滚动条上的按钮 (上下箭头). */
::-webkit-scrollbar-button {
    background-color: #2196F3;
    border-radius: 50px;
    height: 20px;
    width: 20px;
}
/* 滚动条上的滚动滑块. */
::-webkit-scrollbar-thumb { 
    background-color:#E91E63; 
    border-radius: 50px;
}
/*  滚动条轨道. */
::-webkit-scrollbar-track { 
    -webkit-Box-shadow:inset 0 0 6px rgba(0, 142, 255, 1); 
    Box-shadow:inset 0 0 6px rgba(0, 142, 255, 1, 1); 
    background-color:#F5F5F5; 
}
/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
    background-color: rgba(255, 255, 0, 0.43);
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分. */
::-webkit-scrollbar-corner {
    background:transparent;
}
/* 某些元素的corner部分的部分样式(例:textarea的可拖动按钮). */
::-webkit-resizer {
    
}

CSS 修改滚动条样式

<div class="qq_bottom">
超出部分变滚动条
</div>

/*//滚动条整体部分*/
.qq_bottom::-webkit-scrollbar {
    width:5px;
    height:10px;
}

/*//scroll轨道背景*/
.qq_bottom::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #dbdbdb;
}

/*滚动条中的滑块*/
.qq_bottom::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #b5b1b1;
}

/*滚动条上下两端可以进行微调的按钮*/
/*滚动条整体宽度太小会不明显*/
.qq_bottom::-webkit-scrollbar-button {
    width:5px;
    height:5px;
    background-color:red;
}

css 修改默认滚动条样式

来自：https://www.cnblogs.com/juqian/p/6273808.html 侵删

Box" 这是内容111 这里是内容222 这里是内容333

{:;:;:;:;:; :; }Box{:;:;:;:;:;:; } Box::-webkit-scrollbar {:; :; }Box::-webkit-scrollbar-thumb {:;Box-shadow:;:; }Box::-webkit-scrollbar-track {Box-shadow:;:;:; }

css 如何修改滚动条样式

默认滚动条样式如下：

那如何修改呢？如下代码：

<div>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
<p>这是内容111</p>
<p>这里是内容222</p>
<p>这里是内容333</p>
</div>

</div>

.inner{
width: 265px;
height: 400px;
position: absolute;
top: 33px;
left: 13px;
overflow:hidden;
}
.innerBox{
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: .7rem;
font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
height: 100%;
}
/*滚动条样式*/
.innerBox::-webkit-scrollbar {
width: 4px;
/*height: 4px;*/
}
.innerBox::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-Box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.innerBox::-webkit-scrollbar-track {
-webkit-Box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);

}

效果显示如图：

下面就讲解滚动条几个属性，主要有下面7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

原文链接：https://blog.csdn.net/qq_36926807/article/details/80923140