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

网页制作 2024/11/16 佚名

3 2 1

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

复制代码代码如下:
<div style="position:absolute; height:400px; 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标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。其功能大约是为了节约页面空间，就是所谓的“缩地”了。看看效果如何吧，代码在下一楼提供。
参考核心代码：

复制代码代码如下:
<DIV style="PADDING-RIGHT:10px;OVERFLOW-Y:auto;PADDING-LEFT:10px;SCROLLBAR-FACE-COLOR:#ffffff;FONT-SIZE:11pt;PADDING-BOTTOM:0px;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;OVERFLOW:auto;WIDTH:510px;SCROLLBAR-SHADOW-COLOR:#919192;COLOR:blue;SCROLLBAR-3DLIGHT-COLOR:#ffffff;LINE-HEIGHT:100%;SCROLLBAR-ARROW-COLOR:#919192;PADDING-TOP:0px;SCROLLBAR-TRACK-COLOR:#ffffff;FONT-FAMILY:宋体;SCROLLBAR-DARKSHADOW-COLOR:#ffffff;LETTER-SPACING:1pt;HEIGHT:200px;TEXT-ALIGN:left">
</div>

　　滚动条相关颜色属性：
　　face-color：滑块颜色
　　hightlight-color：高亮颜色
　　3dlight-color：三维光线颜色
　　darkshadow-color：暗影颜色
　　shadow-color：阴影颜色
　　arrow-color：箭头颜色
　　tack-color：滑道颜色
　　
　　滚动条属性：
　　overflow：auto为自动，yes为有，no为无
　　overflow-x：横向滚动条
　　overflow-y：纵向滚动条

DIV,滚动条

标签：

DIV,滚动条

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

岱庙资源网 Copyright www.zgmyg.com

评论“给DIV添加滚动条的实现代码”

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

暂无“给DIV添加滚动条的实现代码”评论...

www.zgmyg.com 岱庙资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

最新文章

CSS实现单行、多行文本溢出显示省略号的实现

2024/11/16

实现checkbox&radio对齐的方法

2024/11/16

前端性能优化补充篇

2024/11/16

清除浮动的几种方法(推荐)

2024/11/16

Html与css基础(必看篇)

2024/11/16

一句话新闻

苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月16日

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

DIV,滚动条

CSS里的各种水平垂直居中基础写法心得总结

基于ime-mode属性使用详解

评论“给DIV添加滚动条的实现代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

DIV,滚动条

CSS里的各种水平垂直居中基础写法心得总结

基于ime-mode属性使用详解

评论“给DIV添加滚动条的实现代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存