div滚动条

一般滚动条都是根据高度或者宽度来判断滚动

Y滚动条

Java代码  

  1. <div id="wrap" style="width:1076px; height:460px; overflow-y:scroll;">  
  2. <table class="tableborder" width="100%" style="float:left">  
  3. </div>  

根据数据条数的div滚动条

1.如果表格记录小于14，就不滚动，此时不用div就没有长宽的固定限制。

2.如果大于14就滚动，用div滚动

Java代码  

  1. <div style="overflow:auto; height:400px; border-bottom:1px solid #999999">      
  2. <table border="0" width="100%" cellspacing="0" cellpadding="0" class="list" id="tab1">  
  3. <tr class="tableheader">  
  4. <td width="100"></td>  
  5. </tr>  
  6. </table>  
  7. </div>  

 

X轴滚动条

表格水平滚动条滚动时怎样控制表头/操作不滚动，让数据滚动

思路：设置水平滚动条的宽度<该滚动表格的宽度。

2:设置表格的行的高度style="height:30"。注意只有表格的所有列宽（<td width="40px">）<该滚动表格的宽度时固定的高度才有效。否则失效。

Java代码  

  1. <table  width="100%" border="0" cellspacing="0" cellpadding="0">  
  2. <tr><td>  
  3. <div STYLE='position:relative;overflow:scroll; width:600;overflow-y:hidden'>  
  4. <table width='850' border="0" cellspacing="0" cellpadding="0" class="list">  
  5.       <tr  class="tableheader" style="height:15">  
  6.        <td width="40px">序号</td>  
  7.        <td width="90px"">申请时间</td>  
  8.        <td width="120px">申请公司</td>  
  9.        <td width="70px">联系人</td>  
  10.        <td width="100px">服务名称</b></td>  
  11.        <td width="90px">关务港口</td>  
  12.        <td width="100px">客户名称</td>  
  13.        <td width="100px">客户编码</td>  
  14.       </tr>  
  15. <?php  
  16. $tpl_comm_array=$form->commission_array;  
  17. foreach($tpl_comm_array as $key => $value){  
  18. ?>  
  19.     <tr class="listcontent" onmouseover="this.bgColor='#EFF4FC'" onmouseout="this.bgColor='#ffffff'" style="height:30">  
  20.        <td><b><?php echo $tpl_comm_array[$key]['id']; ?></b></td>  
  21.        <td><?php echo $tpl_comm_array[$key]['commdate']; ?></td>  
  22.        <td><?php echo $tpl_comm_array[$key]['copname']; ?></td>  
  23.        <td><?php echo $tpl_comm_array[$key]['contact']; ?></td>  
  24.        <td><?php echo $tpl_comm_array[$key]['servname']; ?></td>  
  25.        <td><?php echo $tpl_comm_array[$key]['portname']; ?></td>  
  26.        <td><?php echo $tpl_comm_array[$key]['custname']; ?></td>  
  27.        <td><?php echo $tpl_comm_array[$key]['custcode']; ?></td>  
  28.       </tr>  
  29. <?php } ?>   
  30. </table>  
  31. </div>  
  32. </td>  
  33. <td>  
  34. <table width="100%" border="0" cellspacing="0" cellpadding="0" class="list">  
  35. <tr  class="tableheader" style="height:15">  
  36.        <td width="100px">操作</td>  
  37.       </tr>  
  38. <?php  
  39. $tpl_comm_array=$form->commission_array;  
  40. foreach($tpl_comm_array as $key => $value){  
  41. ?>  
  42.       <tr class="listcontent" onmouseover="this.bgColor='#EFF4FC'" onmouseout="this.bgColor='#ffffff'" style="height:30">  
  43.        <td align="center"><span class="ysmbotton"><a href="/Main.php?do=AdminOrder&submit=Update&order_application=<?php echo $tpl_comm_array[$key]['commid']; ?>">  
  44.        签约订单</a></span></td><td style="padding-right:10px;">  
  45.        <span class="bluesmbotton">  
  46.        <a href="/Main.php?do=OrderDisplay&order_application=<?php echo $tpl_comm_array[$key]['commid']; ?>" target="_blank">  
  47.        查看详情</a></span></td>  
  48.       </tr>  
  49. <?php } ?>   
  50. </table>  
  51. <br>  
  52. <td>  
  53. </tr>  
  54. </table>  

纵向

Java代码  

  1. <div style="overflow:auto; height:400px; border-bottom:1px solid #999999;">  
  2. <div style="width:260px;height:120px; overflow-y:scroll; border:1px solid;">  

 

<div style="width:798px;overflow:scroll;"> 横向

<div style="width:260px;height:120px; overflow:scroll; border:1px solid;">双向

 

让竖条消失:
<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-Y:HIDDEN'></BODY>

让横条消失:
<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN'></BODY>

时间： 2024-10-02 21:47:53

div滚动条的相关文章

解决ASP.NET回传后div滚动条位置复位的问题

 这篇文章主要介绍了解决ASP.NET回传后div滚动条位置复位的问题,中心思想是用一个隐藏控件保存当前scorll值.回传回来后根据scrollTop的值,然后在Page_Load中重新设置scrollTop  首先是为DIV添加一个onscroll="javascript:setScollTop()" 的方法(当然不一定是DIV其他的标签思路应该也是这样的)   代码如下: <div style="overflow: auto; height: 152px"

DIV滚动条属性

 DIV滚动条就是利用DIV标签,在里面嵌入CSS样式表,当div所定义的区域的内容达到一定程度时,在div标签里面嵌入CSS样式表,定义overflow的属性值,设置DIV滚动条相关的属性. 这里向大家描述一下DIV滚动条属性及样式设置,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场.  DIV滚动条属性及样式设置 所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入o

html-chrome div滚动条不能自动滚动

问题描述 chrome div滚动条不能自动滚动 下面内容通过Chrome打开后,按Tab键光标可以在文本框间移动,但是Div的滚动条没有跟着滚动是为什么呢?(IE没有问题) <html><div style=""height:150; overflow-y:auto""><input type=""text"" value=""0""/><br

如何实现body的滚动条控制里面的div滚动条？

问题描述 一个叶面里面有个div,并且有滚动条,这个div太大了,它本身的滚动条伸展到叶面下面去了,为了方便,我想用body的滚动条来控制div的滚动条就是说使用body的滚动条的时候,div的滚动条相应的滚动变化如何实现?或者还有什么其它的变通办法?谢谢! 解决方案 解决方案二:给你写段代码让你的body和div同高这样就好了首先<script>window.onload=function(){vars=document.getElementById("bodyID");

div滚动条-div内容显示不全，即使设置了滚动条样式？

问题描述 div内容显示不全,即使设置了滚动条样式? div内容显示不全. 如果设置了style="height:700px; overflow:auto;",那么会出现滚动条,也可以看到比之前更多的内容,但是还是有一些内容没有显示出来. 这可能是什么原因导致的? 注:测试了谷歌浏览器和火狐浏览器,都是一样的情况. 解决方案 div 设置样式 显示滚动条谷歌浏览器滚动条样式设置DIV滚动条显示 解决方案二: 你的布局和css样式呢? 解决方案三: 你的布局和css样式呢? 解决方案四:

一个用jquery写的判断div滚动条到底部的方法【推荐】_jquery

jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它. 我们现在只探讨和垂直滚动有关的 scrollTop.scrollHeight 属性. 一.滚动条有关属性的正确理解: 假设有以下Html代码: <div id="div1" style="overflow-y:auto; ove

Selenium2+python自动化26-js处理内嵌div滚动条

前言     前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条     1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.     2.页面源码如下:(老规矩:copy下来,用文本保存下来,后缀改成.html,用浏览器打开) <!DOCTYPE html><meta charset="UTF-8"> <!-- for HTML5 --><meta ht

解决ASP.NET回传后div滚动条位置复位的问题(利用隐藏控件原理)_实用技巧

首先是为DIV添加一个onscroll="javascript:setScollTop()" 的方法(当然不一定是DIV其他的标签思路应该也是这样的) 复制代码 代码如下: <div style="overflow: auto; height: 152px" align="left" id="dvScoll_1"   onscroll="javascript:setScollTop()">www

js DIV滚动条随机位置的设置技巧_javascript技巧

style后面用于限定DIV样式并加滚动条,这个不多说 关键的地方其实很简单,最后两行Javascript就是了,起作用的只有最后一行: obj.scrollTop=obj.scrollHeight*(Math.random()); obj.scrollTop:滚动条距离顶部的位置 obj.scrollHeight:流动区域的高度 Math.random():获得一个随机数 很简单,有人可能需要,用就拿去,哈哈 PS:IE6 / IE7 / FF2 测试通过 IE7在本地测试时只是每次打开时滚动