DIV 加 ＣＳＳ(overflow: auto;)定义来制作 scroll bar 滚动条效果

很多时候，我们都需要制作 滚动条 效果， 其实滚动条的制作还是很简单的，

就是先定义一个DIV区域， 然后CSS设置好这个DIV的大小 ， 重要的是指定overflow: auto;

这样 如果 div 里的内容超过了 设定的大小，就会出来滚动条。

 

说明， overflow 属性设置当元素的内容溢出其区域时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。

如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。

因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

 

值 描述

　　visible 默认。内容不会被修剪，会呈现在元素之外。

　　hidden 内容会被修剪，但是浏览器不会显示供查看内容的滚动条。

　　scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

　　auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

 

例子如下,

 

HTML 文件中欲显示的区域定义

<div id="scorll1" class="scroll-pane">
<p>&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi. Praesent dignissim metus sit amet enim. Nam auctor, neque semper congue sagittis, risus mi commodo pede, nec euismod magna libero at sem. In enim magna, vestibulum et, blandit sit amet, tempor vel, ligula. Phasellus ante augue, congue vitae, faucibus quis, gravida sit amet, diam. Nullam congue accumsan magna. Etiam a nunc. Aliquam elit urna, ornare vitae, ultrices et, tempus non, nisl. Duis eros neque, luctus quis, interdum ultricies, auctor eu, urna. Donec nibh. Integer in purus tempus mi venenatis mollis. Cras nunc odio, porttitor at, accumsan ac, adipiscing vitae, ante.</p>
 <p>Nam dui enim, fringilla vitae, rhoncus non, pharetra in, nunc. Sed a lectus vel orci bibendum placerat. Aliquam erat volutpat. Integer odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dictum egestas lorem. Donec ultricies volutpat tellus. Phasellus justo arcu, pharetra eget, cursus non, consectetuer ac, nunc. Fusce orci tortor, semper vel, lacinia vitae, accumsan id, quam. Mauris semper molestie lectus. Duis venenatis erat ultrices nisl.</p>
</div>

 

CSS定义 如下

<style>
.scroll-pane {
width:100px;
height:100px;
overflow: auto;
background: #ccc;
float: left;
}
</style>