关于div的水平滚动条和垂直滚动条的问题，不知道如何嵌套。。。谢谢了。。。

snakewu 2007-04-30 12:42:23
有个table，最右边有垂直滚动条可以滚动所有行的数据；
在这个table的下面，另有一个table，是接在上个table右边的一半的下部（就是说上个table有10个th数据格，下一个table就是接在第5个数据格位置的下方），
这个table下方有个水平滚动条，这个水平滚动条可以完全控制第一个table（后5个th数据格）和第二个table的水平数据。

问题在于垂直滚动条可以垂直控制第一个table的所有数据，但不包括第二个table；
但是水平滚动条可以同时控制第一个table的后半部和第二个table；
而且要全部显示这两个滚动条；

如果嵌套div的话，其中一个滚动条会被隐藏，这样的效果该如何做，谢谢了。。。
...全文
4426 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
balibell 2007-11-05
  • 打赏
  • 举报
 回复
借用了下liveforever兄的代码，缺点：右侧滚动条不能一直显示，不过可以用中轴代替嘛。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>   

<title>表格 </title> 

<style   type="text/css"> 

*{padding:0;margin:0;border:0;} 



table   {border-collapse:collapse;} 

table   td{border-collapse:collapse;width:100px;height:25px;font:14px   Arial;} 



#xCtrl{position:relative;width:820px;height:300px;overflow:scroll;overflow-x:scroll;overflow-y:hidden;}

#yCtrl{overflow:scroll;width:1020px;height:100%;} 



.tableAbox{width:1000px;overflow:hidden;}/*.yCtrl   .tableAbox   宽高一致*/ 

.tableA{width:1000px;} 

.tableA   td{background:#eee;color:#f00;} 



.tableB{position:absolute;bottom:16px;right:-186px;width:490px;overflow:hidden;}/*宽度     与   脚本   宽度   保持一致*/ 

.tableB   td{background:#f00;color:#eee;} 

</style> 



</head>   

<body> 

<div id="xCtrl">

<div id="yCtrl"> 	

	<div class="" style="width:1000px;">

	<div class="tableAbox">

		<table  cellpadding="0"   cellspacing="0"	   class="tableA">		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>		<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>				<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>		<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>		<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>			<td>7 </td>				<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>		<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>				<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>		<td>4 </td>			<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>				<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>			<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>				<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>			<td>7 </td>			<td>8 </td>		<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			<td>6 </td>				<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>		<td>6 </td>			<td>7 </td>			<td>8 </td>			<td>9 </td>			<td>10 </td>		</tr>		</table>

	</div>

	<table cellpadding="0"	  cellspacing="0"	  class="tableB">		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			</tr>		<tr>		<td>1 </td>				<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>		</tr>		<tr>		<td>1 </td>			<td>2 </td>			<td>3 </td>			<td>4 </td>			<td>5 </td>			</tr>		<tr>		<td>1 </td>			<td>2 </td>					<td>3 </td>			<td>4 </td>			<td>5 </td>			</tr>		</table>

	</div>

</div> 

</div>

<script   type="text/javascript"> 

var   xCtrl   =   document.getElementById("xCtrl"); 

var   yCtrl   =   document.getElementById("yCtrl"); 

xCtrl.onscroll = function(){

	return false

}

//alert(xCtrl.onscroll) 



/*window.setInterval(function(){ 

  //document.getElementById("tableBbox").scrollLeft   =   document.getElementById("tableAbox").scrollLeft; 

boxB.style.width   =   boxBwidth     +   parseInt(boxA.scrollLeft)   +  "px"; 

          } 

,5) 

*/

</script> 



</body>   



</html>
liveforever_1981 2007-10-30
  • 打赏
  • 举报
 回复
要是嵌套 在 A 的里面 估计能解决 没有滚动条的时候
水平方向上 不用管 又落到垂直上的了
反正得弄一个
liveforever_1981 2007-10-30
  • 打赏
  • 举报
 回复
要是嵌套 在 A 的里面 估计能解决 没有滚动条的时候
水平方向上 不用管 又落到垂直上的了
反正得弄一个
liveforever_1981 2007-10-30
  • 打赏
  • 举报
 回复
我觉得基本不太可能
下边是我用时钟刷的

效果：
ie6（还可以） > firefox > ie7 > 其他浏览器
左移 > 右移


若没有滚动条 是错误的 ：）


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title >表格</title >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{padding:0;margin:0;border:0;}

table {border-collapse:collapse;}
table td{border-collapse:collapse;width:100px;height:25px;font:14px Arial;}

.mainBox{position:relative;bottom:0;right:0;width:800px;height:300px;}

.tableAbox{width:800px;height:300px;overflow:scroll;position:absolute;top:0px;left:0px;}/*.mainBox .tableAbox 宽高一致*/
.tableA{width:1000px;}
.tableA td{background:#eee;color:#f00;}

.tableBbox{position:absolute;bottom:16px;right:16px;width:284px;overflow:hidden;}/*宽度 与 脚本 宽度 保持一致*/
.tableB{width:500px;}
.tableB td{background:#f00;color:#eee;}
</style>

</head >
<body >
<div class="mainBox">
<div class="tableAbox" id="tableAbox">
<table cellpadding="0" cellspacing="0" id="tableA" class="tableA">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>

</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>

</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>

</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>

</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>

</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>

</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>

</tr>
</table>
</div>
<div class="tableBbox" id="tableBbox">
<table cellpadding="0" cellspacing="0" class="tableB">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>

</table>


</div>
</div>
<script type="text/javascript">
var boxA = document.getElementById("tableAbox");
var boxB = document.getElementById("tableBbox");
var boxBwidth = 284;

window.setInterval(function(){
//document.getElementById("tableBbox").scrollLeft = document.getElementById("tableAbox").scrollLeft;
boxB.style.width = boxBwidth + parseInt(boxA.scrollLeft) + "px";
}
,5)

</script>

</body >

</html >
gs6fox 2007-10-29
  • 打赏
  • 举报
 回复
能否单画个草图说明一下你的意图吗
gs6fox 2007-10-29
  • 打赏
  • 举报
 回复
可不可以简单画个草图说明一下
easyroom 2007-10-29
  • 打赏
  • 举报
 回复
不懂
nicholsky 2007-10-27
  • 打赏
  • 举报
 回复
我也是
cloudgamer 2007-06-02
  • 打赏
  • 举报
 回复
看不懂
利用Marquee实现无缝循环滚动文字
MARQUEE属性与用法，能实现无缝循环滚动文字，上下，左右都可以
给div添加滚动条
<!--记住宽和高一定要设置，否则不行--> <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div> Demo说明： 1 上面是对水平滚动条和垂直滚动条分别设置，可以直接替换为"overflow:auto" 2 如果要单独设置水平滚动条如上：“overflow-x:auto” 3 如果要单独设置垂直滚动条如上：“overflow-y:auto” 4 对于上面几点，
html自定义的DIV垂直滚动条
首先说一下自定义滚动条的一个要求：鼠标滚动在它div上滚动时，如果没有滚到顶端或底部则不能影响页面滚动条和系统自带一样 让一个div拥有滚动条 1、只有垂直滚动条 #mydiv1 {     position: relative;     overflow-x: hidden;     overflow-y: scroll;     width: 100px;
html5实现纵向滚动,【前端】如何让水平滚动区域的垂直滚动条固定在滚动区域的右边？...
1.问题描述题目可能一下子看不懂，下面这张图是我想实现的效果：外部div中有一个水平滚动条，内部div中有一个垂直滚动条但是我必须把水平滚动条拉到最右边，才能看到垂直滚动条。而我想把垂直滚动条固定在视窗口的右边，从而不需要拉动水平滚动条，就能看到垂直滚动条2.我尝试的方法：通过谷歌和百度的中文搜索，之所以没英文搜索，是因为这个问题太复杂，以至于用英文描述超出我的能力。回答即使同时有横向和纵向滚动条...
html中div加滚动条
如果该div被包含在其他对象例如td中，则位置可设为相对positionrelative。如果要出现水平滚动条，则overflow-xauto。不过在不超出时，会有下面的滚动条，所以不是最好的选择。同理，垂直滚动条为overflow-yauto。这样比较好的是，在宽和高不超出时，只是一条线。记住宽和高一定要设置噢，否则不成的。记住宽和高一定要设置噢，否则不成的。...
CSS

61,129

社区成员

60,711

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章