div+css在固定宽高下显示滚动条(右侧、下方)以及滚动条颜色 - overflow_CSS学习

资料来源：网络整理时间：2023/3/4 0:57:13 共计：3591 浏览

滚动条现在已经不是很常用了，但偶尔在特殊的模块仍然发光发热，下面在详细说明下如何在div+css下实现固定宽度和高度的滚动条，以及如何在右侧和下方显示滚动条。

1、div+css如何加滚动条：

div 加滚动条的方法：
<div style="position:absolute; height:400px; overflow:auto"></div>
div 设置滚动条显示：overflow :yes
div 设置滚动条自适应显示：overflow :auto
div 设置上下滚动条显示：overflow-y :yes
div 设置上下滚动条自适应显示：overflow-y :auto
如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative

具体来说：

div显示上下左右滚动条

<div style="width:260px;height:120px; overflow:scroll; border:1px solid;"> 这里是你要显示的内容 </div>

div显示上下滚动条的css代码

<div style="width:260px;height:120px; overflow-y:scroll; border:1px solid;"> 这里是你要显示的内容 </div>

div显示左右滚动条的css代码

<div style="width:260px;height:120px; overflow-x:scroll; border:1px solid;"> 这里是你要显示的内容 </div>

2、修改滚动条颜色的代码

SCROLLBAR-FACE-COLOR(立体滚动条凸出部分的颜色)
SCROLLBAR-HIGHLIGHT-COLOR(滚动条空白部分的颜色)
SCROLLBAR-SHADOW-COLOR(立体滚动条阴影的颜色)
SCROLLBAR-ARROW-COLOR(上下按钮上三角箭头的颜色)
SCROLLBAR-BASE-COLOR(滚动条的基本颜色)
SCROLLBAR-DARK-SHADOW-COLOR(立体滚动条强阴影的颜色)

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式）_js/jQuery | ·下一条：JS动态修改iframe高度和宽度的方法/iframe 去除边框和自适应高度_js/jQuery