如果需要对div设置一个滚动条，那么你可能需要设置滚动条的样式，横向或者纵向，需要用overflow-y和overflow-y来设置，今天就来给大家说一下这俩个属性。
对div设置滚动条，设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏，
overflow-y:scroll; 总是显示纵向滚动条
overflow-y:visible : 不剪切内容也不添加纵向滚动条
div设置滚动条实例
立即学习“前端免费学习笔记（深入）”；
通过对第一个DIV对象设置div宽度、div高度、div边框样式，并在DIV盒子里添加演示文字内容，第二个盒子设置相同的CSS样式，盒子文字内容相同，并设置横向和纵向滚动条，观察效果。
第一个盒子CSS命名为“divcs5-a”,第二个DIV盒子样式选择器命名为“div-b”。
1、具体完整html源代码如下：
nbsp;html>div滚动条 在线演示 .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，并设置了横纵滚动条样式 */测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
登录后复制
为了观察效果我们对两个DIV盒子都设置基础相同的CSS样式和相同的文字内容。对“.div-b”设置了X和y（横向和纵向的滚动条样式。）
说明：第一个盒子“.div-a”内容过多而溢出了DIV盒子，第二个盒子设置了滚动条样式，所以没有溢出，纵向右侧（Y）出现了可下拉上拉滚动条样式，横向底部（X）出现滚动条效果但不可左右拉动，这是因为文字内容不能撑开DIV宽度，如果是大于DIV设置宽度的overflow-y这样横向底部（X）就会出现滚动条效果。
相关推荐：
以上就是html的滚动条样式设置的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121587.html
