先看效果，大家按需求自行修改
具体代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>自定义浏览器滚动条</title>
</head>
<style>
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 15px; /*对垂直流动条有效*/
height: 15px; /*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: chartreuse;
border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
/*border-radius: 7px;*/
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: red;
}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
background-color:blue;
}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
background:fuchsia;
}
</style>
<body>
<div class="mydiv" style="width: 2000px;height: 100px;border: 1px solid #BC8F8F;">
该元素的宽为2000，高为200px
</div>
<img src="https://files.jb51.net/file_images/article/201708/2017082115263920.png"/>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</body>
</html>
OK