实现页面局部内容滚动

如何实现在有限的空间内显示更多的内容呢？其实很多页面的实现上都考虑了这样的一个问题。

如Thickbox的官方页面中就大量使用了这种技术，对页面的局部内容实现滚动，从而使页面上可以显示更多的内容。

那如何实现这样的滚动呢？其实很实现简单。步骤如下：

1. 使用div标签来定义此区域的范围。
2. 在CSS中对此区域定义宽和高。
3. 在CSS中使用overflow属性来定义div的滚动。

现在我们来看一下如何定义overflow的属性，overflow的属性值可以为以下四种：

• overflow: auto - 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，包括水平、垂直或者两者都显示。不过只有当显示的数据内容超过定义的宽高时，滚动条才会显示。
• overflow: scroll - 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，但不管内容的多少，即使显示的内容很少，屏幕上也会显示一个Disable状态的滚动条。
• overflow: visible - 不剪切内容也不添加滚动条.
• overflow: hidden - 会对内容进行剪切，超过显示宽高的内容不会被显示。

可能常用的即时overflow:auto和overflow: scroll。当然此效果也可以使用iframe来实现，不过屏幕内容的刷新会是一个比较烦人的问题。

HTML:

1. <div class="scroll">  
2. <p>This is a scrolling are created with the CSS property overflow.</p>  
3. <p><span style="color: red;">This is red color</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>  
4. <p>This is a normal paragraph.<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>  
5. </p>  
6. <p>This scrolling are can contain normal html like <a href="index.php">link</a></p>  
7. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>  
8. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>  
9. </div>  

<div class="scroll"> <p>This is a scrolling are created with the CSS property overflow.</p> <p><span style="color: red;">This is red color</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p> <p>This is a normal paragraph.<span style="font-weight: bold; font-size: 22px;">This is big bold text</span> </p> <p>This scrolling are can contain normal html like <a href="index.php">link</a></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p> </div>

CSS:

1. div.scroll {   
2. height: 200px;   
3. width: 300px;   
4. overflow: auto;   
5. border: 1px solid #666;   
6. background-color: #ccc;   
7. padding: 8px;   
8. }