在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.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
css只是层叠样式表，是控制页面的样式的，并不能对一些操作进行控制。至于禁止鼠标滑轮的滚动是需要用js控制的，在js中有一个mousewheel事件，对这个事件进行设置，可以实现对鼠标滚轮的一些操作。使用position:absolute来定位：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>demo</title>
<style type="text/css">
body{margin:0pxpadding:0pxoverflow:hiddenpadding-top:22pxpadding-bottom:22px}
div{margin:0pxpadding:0px}
#header{background-color:bluecolor:whiteposition:absolutetop:0pxleft:0pxheight:16pxwidth:100%}
#content{background-color:yellowwidth:100%height:100%overflow:auto}
#footer{background-color:greencolor:whitewidth:100%height:16pxposition:absolutebottom:0pxleft:0px}
</style>
<script language="javascript">
</script>
</head>
<body>
<div id="header">header</div>
<div id="content">
<script language="javascript">
for(i=0i<1000i++){
document.write(i+"<br />")
}
</script>
</div>
<div id="footer">footer</div>
</body>
</html>
