<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
div {
width: 100px;
height: 300px;
border: 2px solid red;
overflow-x: scroll;
overflow-y: scroll;
}
/*
滚动条的设置
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
height: 8px;
width:12px;
background-color: white;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
height: 8px;
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:gray;
}
</style>
</script>
</head>
<body>
<div id="div1">
2019年6月12日至16日，国家主席习近平应邀对吉尔吉斯斯坦、塔吉克斯坦进行国事访问，并出席在比什凯克举行的上海合作组织成员国元首理事会第十九次会议和在杜尚别举行的亚洲相互协作与信任措施会议第五次峰会。
在世界百年未有之大变局中，中国和中亚国家面临共同的发展和安全挑战，需要构建更为紧密的合作关系，更好地维护各自和共同的利益。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
HTML 5,CSS 3,JavaScript,JQuery等。
</div>
</body>
</html>
但是一定注意:IE8设置滚动条的与这里不一样。
scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/
来源：oschina
链接：https://my.oschina.net/u/2351011/blog/3062879