我在实现可滚动的 div 时遇到问题。 可能会发生错误，因为其中一个内部表 (tableleft) 正在强制第一次滚动。 第二个滚动由外部 div 启动。
如何删除其中一个滚动条？
这是一个显示问题的 JSFiddle: http://jsfiddle.net/uY3CJ/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<style>
html {
height: 100%;
}
body {
height: 100%;
overflow-x:hidden;
overflow-y:scroll;
background: #5ea71d;
background:-webkit-gradient(radial, 50% 50%, 10, 50% 50%, 850, from(#93d81e), to(#2f5c1b), color-stop(.6,#5ea71d));
background: -moz-radial-gradient(center 45deg, circle farthest-side, #93d81e 0%, #5ea71d 60%, #2f5c1b 100%);
}
#scroll {
height: inherit;
width: inherit;
left: inherit;
margin-left: inherit;
overflow: auto;
background-color: white;
position: absolute;
padding: 0px;
text-align: center;
}
#innerDiv {
height: inherit;
left: inherit;
margin-left: inherit;
overflow: auto;
display: inline-block;
padding-top: 6%;
padding-left: 6%;
padding-right: 6%;
padding-bottom: 12%; /* provide space for back button */
position: absolute;
}
table {
align: left;
text-align:left;
font-family:Lucida Sans Unicode;
font-size: 14px;
}
table td {
font-weight: regular;
}
.table th {
font-weight:bold;
text-align:center;
}
.tdleft {
background-color: white;
box-shadow: 0px 10px 5px #888888;
vertical-align: top;
}
.tdright {
background-color: black;
color: white;
box-shadow: 0px 10px 5px #888888;
vertical-align: top;
}
.tableleft {
}
.tableleft td {
padding: 4px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #cccccc) );
background:-moz-linear-gradient( center top, #ffffff 5%, #cccccc 100% );
}
.tableleft th {
padding: 4px;
font-weight: bold;
text-align:left;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #cccccc) );
background:-moz-linear-gradient( center top, #ffffff 5%, #cccccc 100% );
}
.tableright {
}
.tableright td {
padding: 4px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #4c4c4c) );
background:-moz-linear-gradient( center top, #000000 5%, #4c4c4c 100% );
}
.tableright th {
padding: 4px;
font-weight: bold;
text-align:left;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #4c4c4c) );
background:-moz-linear-gradient( center top, #000000 5%, #4c4c4c 100% );
}
#endimg {
height: inherit;
width: inherit;
left: inherit;
margin-left: inherit;
position:absolute;
}
</style>
<title>TEST</title>
</head>
<body>
<div style="position:absolute;">
<textarea style="border: 2px solid red; position:absolute;" rows="1" cols="8" id="progress"></textarea>
<br/>
</div>
<div style="z-index: 0; position: absolute; width: 1024px; height: 768px; left: 50%; margin-left: -512px;">
<div style="z-index: 0; position: absolute; width: 1024px; height: 768px; display: block; left: 50%; margin-left: -512px;">
<div id="scroll">
<div id='innerDiv'>
</br></br>
<table>
<tr>
<tr>
<th class='thleft'>Concept and Game Design</th>
<th class='thleft'>Technical Implementation</th>
</tr>
<tr>
<td class='tdleft'>
<table class='tableleft'>
<tr><th>Original Concept</th><td>---------------------------------</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th>Project Leader</th><td>---</td></tr>
<tr><th>Game Design & Graphics</th><td>---</td></tr>
<tr><th></th><td>---</d></tr>
<tr><th></th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
<tr><th>Voice Acting</th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
</table>
</td>
<td class='tdright'>
<table class='tableright'>
<tr><th>Technical Director</th><td>---------------------------</td></tr>
<tr><th>Programming</th><td>---</td></tr>
<tr><th></th><td>---</td></tr>
</table>
</td>
</tr>
</tr>
<tr><td colspan='2'></br></td></tr>
<tr><th colspan='2'>Graphics (with the exception of those listed below) created with --</th></tr>
<tr><td colspan='2'></br></td></tr>
<tr><th>This Computer Game uses this picture from </th><td>-----------------------</td></tr>
<tr><th>This Computer Game uses this picture from </th><td>---------------------</td></tr>
<tr><td colspan='2'></br></td></tr>
<tr><th colspan='2' style='color: green;'>MUSIC</th></tr>
<tr><td colspan='2'></br></td></tr>
<tr><th colspan='2'>This Computer Game uses these sounds from -------------</th></tr>
<tr><th></th><td>---------</td></tr>
<tr><th></th><td>---------</td></tr>
<tr><th></th><td>---------</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
最佳答案
从内部 div 中移除 overflow auto。这样只有外层的div才会有滚动条
#innerDiv{
overflow:auto; /*remove this*/
}
关于html - Div 滚动两个滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24016246/