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

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

直接为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>

提示您可以先修改部分代码再运行

如果想更好的实现效果可以参考狼蚁网站SEO优化的代码

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

复制代码

代码如下:

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

上一篇：CSS里的各种水平垂直居中基础写法心得总结下一篇：基于ime-mode属性使用详解

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设