如果需要对div设置一个滚动条，那么你可能需要设置滚动条的样式，横向或者纵向，需要用overflow-y和overflow-x来设置，今天就来给大家说一下这俩个属性。
对div设置滚动条，设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏，
overflow-y:scroll; 总是显示纵向滚动条
overflow-y:visible : 不剪切内容也不添加纵向滚动条
div设置滚动条实例
立即学习“前端免费学习笔记（深入）”；
通过对第一个DIV对象设置div宽度、div高度、div边框样式，并在DIV盒子里添加演示文字内容，第二个盒子设置相同的CSS样式，盒子文字内容相同，并设置横向和纵向滚动条，观察效果。
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
第一个盒子CSS命名为“divcs5-a”,第二个DIV盒子样式选择器命名为“div-b”。
1、具体完整html源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div滚动条 在线演示 </title>
<style>
.div-a,.div-b{ width:150px; height:100px; float:left; border:1px solid #F00}
.div-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;}
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */
</style>
</head>
<body>
<div class="div-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div>
<div class="div-b">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div>
</body>
</html>为了观察效果我们对两个DIV盒子都设置基础相同的CSS样式和相同的文字内容。对“.div-b”设置了X和y（横向和纵向的滚动条样式。）
说明：第一个盒子“.div-a”内容过多而溢出了DIV盒子，第二个盒子设置了滚动条样式，所以没有溢出，纵向右侧（Y）出现了可下拉上拉滚动条样式，横向底部（X）出现滚动条效果但不可左右拉动，这是因为文字内容不能撑开DIV宽度，如果是大于DIV设置宽度的图片这样横向底部（X）就会出现滚动条效果。
相关推荐：
