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

网页制作 2024/10/5 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

直接为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,滚动条

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

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

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

最新文章

何洛洛.2024-别叫醒我（EP）【光羽】【FLAC分

2024/10/5

林忆莲.1996-爱莲说2CD【华纳】【WAV+CUE】

2024/10/5

黄妃.2005-红【亚律】【WAV+CUE】

2024/10/5

刘美麟《同生》[FLAC/分轨][161.95MB]

2024/10/5

群星《前途海量电影原声专辑》[320K/MP3][

2024/10/5

一句话新闻

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

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

苹果官方表示：

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

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

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

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

DIV,滚动条

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

基于ime-mode属性使用详解

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

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

更新日志

友情链接

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

DIV,滚动条

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

基于ime-mode属性使用详解

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

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

更新日志

友情链接

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