给Div表格元素添加滚动条

 首页 > 网页特效 > 层和布局 > 给Div表格元素添加滚动条

给Div表格元素添加滚动条

 2018-07-20  609  收藏  0 赞一个  0 真差劲  0 去评论

<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> 的 的 的 的 的 的 的 的 的 的 的 的 的 的 的</p>
        <p> 的 的 的 的 的 的 的 的 的 的 的 的 的 的 </p>
        <p> 的 的 的 的 的 的 的 的 的 的 的 </p>
        <p> 的 的 的 的 的 的 的 的 的 的 的 的 的 的 </p>
        <p> 的 的 的 的 的 的 的 的 的 </p>
        <p> 的 的 的 的 的 的 的 的 的 的 的 </p>
        <p> 的 的 的 的 的 的 的 的 的</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>


<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 



</BODY>
</HTML>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

偶尔想到的问题，如何给Div元素添加滚动条？试着写了一个，有几个要领：

1、直接为div指定overflow属性为auto；

2、必须指定div的高度；

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

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行