049月

DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏

DIV滚动条设置 CSS滚动条显示和滚动条隐藏

为DIV设置滚动条,设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。还可以使用CSS样式来设置隐藏在HTML FRAM中的滚动条。,接下来,我想向大家介绍一下。。

一、CSS基础知识   –   TOP

overflow-y:scroll; 始终显示纵向滚动条。
overflow-y:visible : 没有内容被切割,没有纵向滚动条被添加。
了解:overflow-y手册

overflow-x:scroll; 始终显示水平滚动条。
overflow-x:visible : 不要剪切内容或添加水平滚动条。
了解:overflow-x手册

理解CSS overflow

二、DIV设置滚动条实例   –   TOP

DIVCS5将DIV宽度设置为第一个DIV对象。、div高度、div边框样式,并在DIV框中添加演示文本。,第二个盒子有相同的CSS风格。,框文本内容是相同的。,并设置水平滚动条和垂直滚动条。,观察效果。

第一个盒子CSS被命名为DIVCS5-A。,第二个DIV框样式选择器名为DIVCS5-B。。

1、具体完整的HTML源代码如下:

  1. > 
  2. <html> 
  3. <head> 
  4. <meta charset="gb2312" /> 
  5. <title>DIV滚动条在线演示title> 
  6. <style> 
  7. .divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00} 
  8. .divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} 
  9. CSS注释:设置第一盒间距为10px的第二框,并设置了横纵滚动条样式 */ 
  10. style> 
  11. head> 
  12. <body> 
  13. <div class="divcss5-a">DIVCS5测试内容,欢迎来到DIVCS5学习DIV CSS技术。。你可以通过。
    过DIVCSS5主站上的所有免费CSS教程足可学会DIV CSS技术 - 如果需要深入系统学习、较短的实现时间
    理想学习效果可参加DIV+CSS培训班学习。
    div> 
  14.  
  15. <div class="divcss5-b">DIVCS5测试内容,欢迎来到DIVCS5学习DIV CSS技术。。你可以通过。
    过DIVCSS5主站上的所有免费CSS教程足可学会DIV CSS技术 - 如果需要深入系统学习、较短的实现时间
    理想学习效果可参加DIV+CSS培训班学习。div> 
  16. body> 
  17. html> 

为了观察效果我们对两个DIV盒子都设置基础相同的CSS样式和相同的文字内容。对“.divcss5-b”设置了X和y(横向和纵向的滚动条样式。)

2、观察DIV CSS滚动条示例截屏效果

DIV滚动条样式实例效果截图
CSS DIV滚动条样式实例效果截图

说明:第一个框.divCS55-A溢出并溢出DIV框。,第二个盒子设置了滚动条样式,所以没有溢出。,纵向右侧(Y)出现了可下拉上拉滚动条样式,滚动条出现在横向底部(x),但不能被拉动。,这是因为文本内容不支持div宽度。,如果图像大于div的宽度,则滚动条将出现。。

3、在线演示:查看此案

4、实例包下载

立即下载 (

5、小结,如何隐藏CSS DIV滚动条
DIVE默认值不是滚动条。,如果加了滚动条样式,滚动后,滚动条将消失。。如果是在框架IFRAME中出现的滚动条,如果希望X水平隐藏滚动条,只需要设置overflow-x:visible或overflow-x:hidden;如果想iframe出现Y纵向滚动条隐藏可以设置CSS样式overflow-y:visible或overflow-y:hidden即可隐藏滚动条。

三、上述案例遭遇知识扩张。   –   TOP

1、DIV溢出解决方案
2、隐藏对象内容之外的CSS
3、html iframe
4、隐藏内容

如果你需要重印,请注明文章的来源和来源地址。:

如果你对这篇文章有任何疑问,请把它提交给div。 CSS论坛,或任何网页制作CSS问题,立即向CSS论坛发布解决方案 或 直接DIVCS5网页搜索遇到DIVCSS查询。
CSS教程文章修订日期:2013-09-29 14:38 原创:DIVCSS5
本文www.divcss5.com DIVCS5版权所有。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注