带滚动条的DIV

最新推荐文章于 2024-05-30 18:55:27 发布

ptzrbin

最新推荐文章于 2024-05-30 18:55:27 发布

阅读量758

点赞数

分类专栏： CSS 文章标签： div css 滚动条

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果如图

核心代码

日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字<div>

样式

.divScroll{
       OVERFLOW:auto;
       scrollbar-face-color: #FFFFFF;
       scrollbar-shadow-color: #D2E5F4;
       scrollbar-highlight-color: #D2E5F4;
       scrollbar-3dlight-color: #FFFFFF;
       scrollbar-darkshadow-color: #FFFFFF;
       scrollbar-track-color: #FFFFFF;
       scrollbar-arrow-color: #D2E5F4";
}

样式相关说明

滚动条相关颜色属性：

　　face-color：滑块颜色

　　hightlight-color：高亮颜色

　　3dlight-color：三维光线颜色

　　darkshadow-color：暗影颜色

　　shadow-color：阴影颜色

　　arrow-color：箭头颜色

　　tack-color：滑道颜色

　　滚动条属性：

　　overflow：auto为自动，yes为有，no为无

　　overflow-x：横向滚动条

　　overflow-y：纵向滚动条

直接复制代码保存：

<html>
<head>
<title>jquery表格操作</title>
<style>
	 .divScroll{
		OVERFLOW:auto;
        scrollbar-face-color: #FFFFFF;
        scrollbar-shadow-color: #D2E5F4;
        scrollbar-highlight-color: #D2E5F4;
        scrollbar-3dlight-color: #FFFFFF;
        scrollbar-darkshadow-color: #FFFFFF;
        scrollbar-track-color: #FFFFFF; 
		scrollbar-arrow-color: #D2E5F4";
      }
</style>
</head>
<body>
<DIV align=center style="width: 120px; height: 140px; " class="divScroll">
日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字日誌文字<div>
</body>
</html>