• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >div/css > 给DIV添加滚动条的实现代码

给DIV添加滚动条的实现代码

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含div滚动条代码,css div滚动条样式,div滚动条,div滚动条设置,div滚动条自动等相关知识,佚名 希望在学习及工作中可以帮助到您

直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:


如果要出现水平滚动条,则: overflow-x:auto
同理,垂直滚动条为: overflow-y:auto
如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative

 例如:



<HTML> <HEAD> <TITLE>测试表格内的滚动条</TITLE> </HEAD> <BODY> <table> <tr> <td>表格内的滚动条:</td> <td> <div id="wins" style="position:absolute;height:200;width:200;overflow:auto;background:#EEEEEE;"> <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p> <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> <p>ppppppppppppppppppppppppp </p> </div> </td> </tr> <tr> <td colspan="2" align="right"> <span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)' onmouseout=clearInterval(scrollb)>向左</span> <span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)' onmouseout=clearInterval(scrollb)>向上</span> <span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)' onmouseout=clearInterval(scrollb)>向右</span> <span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)' onmouseout=clearInterval(scrollb)>向下</span> </td> </tr> </table> </BODY> </HTML>
提示:您可以先修改部分代码再运行</div>

如果想更好的实现效果可以参考下面的代码:

所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。其功能大约是为了节约页面空间,就是所谓的“缩地”了。看看效果如何吧,代码在下一楼提供。
参考核心代码:

</div>

您可能想查找下面的文章:

  • 给DIV添加滚动条的实现代码
  • 给div加滚动条 div显示滚动条设置代码

相关文章

  • 2017-06-02CSS清除浮动方法总结
  • 2017-06-02使用CSS的overflow属性防止float撑开div的方法
  • 2017-06-02div嵌套 img 空白解决方法
  • 2017-06-02纯CSS实现Tab切换标签效果代码
  • 2017-06-02图片在div中垂直和水平同时对齐的实现方法
  • 2017-06-02Div设置最小宽度(有浮动元素或浏览器宽度小于1350之后)
  • 2017-06-02DIV CSS制作网页时易犯的错误总结
  • 2017-06-02页面内嵌样式表中使用url(), 出现页面多次载入问题解决
  • 2017-06-02CSS教程:div设置float后高度不自动增加
  • 2017-06-02div ,frame等空间的透明实现代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用position:fixed属性让DIV居中
    • 使用div+css布局过程中在什么时候使用table呢
    • 让两个Div并排显示的多种方法
    • div css制作网页实战笔记心得
    • 设置一个DIV块固定在屏幕中央的两种方法(推荐)
    • 纯CSS实现的菱形导航菜单效果代码
    • 根据已知高和宽绝对垂直居中div示例代码
    • 如何使div垂直水平居中的css代码
    • CSS三栏布局探讨——中间固定宽度两边自适应宽度
    • HTML+CSS实现漂亮的背景实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有