在css设置可改变大小的div滚动条样式方法：
1.首先新建html文档，进入代码书写界面。
2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
只需要修改 2 处地方就可以了~（注意记得加载jquery包）
① 修改css，将 div.item a 的宽度改成你所需要的宽度（470px左右就可以了）；
div.items a {display:block
float:left
margin-right:8px
width:470px // 原本是88px，一行5列
height:66px
background:#BBB
font-size:50px
color:#ccc
line-height:66px
text-decoration:none
text-align:center
cursor:pointer
}
② 修改参数，这个 demo 采用 jquery 的 extend 扩展方法来自定义方法，调用非常方便，而且参数也考虑齐全。
在 script 的最后那部分，将 line 的 5 改成 1：
/* 参数说明：* line: 每行的列数，滚动的时候需要用到这个参数，来判断滚动的宽度
* speed: 滚动动画所用的时间，500 是 500 毫秒，即滚动动画在 500 毫秒内完成
* timer: 每次滚动的间隔时间，3000 是 3秒
* left: 左按钮的选择器
* right: 右按钮的选择器
*/
$(document).ready(function () {
$("#scrollable").Scroll({ line: 1, speed: 500, timer: 3000, left: ".prev", right: ".next"})
})
设置 overflow 属性：
div{
width:150px
height:150px
overflow:auto
}
overflow属性如下:
auto：当此div子元素宽和高大于该div的宽和高时，则会出现对应方向上的滚动条。
scroll：不管子元素的宽和高，都出现滚动条，但当子元素宽和高小于父元素时，滚动条不能拖动。
推荐使用auto属性，如果只想让水平方向出现滚动条，则使用overflow-x:auto
