我有一个名为 scroll1.html 的程序，当鼠标移动到图像上方时，它会滚动 div。在名为 scroll2.html 的第二个程序中，我希望内部滚动，但它不起作用。
Scroll1.html:工作版本---------------------------------------- ------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
var div, scrollTop, scrollID, direction, imgDirection, scrollID1;
function scroll() {
if (direction > 150) {
if (scrollTop != 0)
scrollTop--;
}
else {
if (scrollTop != (div.scrollHeight - 300))
scrollTop++;
}
div.scrollTop = scrollTop;
scrollID = setTimeout("scroll()", 10);
}
window.onload = function() {
div = document.getElementById("containerDiv");
div1 = document.getElementById("Div1");
scrollTop = div.scrollTop;
};
function scrollOnImage() {
if (imgDirection ==1 ) {
if (scrollTop != 0)
scrollTop--;
}
else if (imgDirection == 2) {
if (scrollTop != (div1.scrollHeight - 300))
scrollTop++;
}
div1.scrollTop = scrollTop;
scrollID1 = setTimeout("scrollOnImage()", 10);
}
</script>
</head>
<body>
<br />
<br />
<div style="border: solid 1px red; float: left">
<div id="containerDiv" style="height: 300px; width: 200px; overflow: auto;"
onmousemove="direction=event.clientY - div.offsetTop;"
onmouseout="clearTimeout(scrollID)"
onmouseover="direction=event.clientY - div.offsetTop; scroll()">
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content
</div>
<br />
</div>
<div style="border: solid 1px red; float: left">
<div id="Div1" style="height: 300px; width: 200px; overflow: auto;" >
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content dummy content dummy content
dummy content dummy content dummy content dummy content
</div>
</div>
<div style="border: solid 1px red; float: left">
<img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/upDownArrow.png" onmouseout="clearTimeout(scrollID1)" onmouseover="imgDirection=1; scrollOnImage()" /><br /><br />
<img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/downUpArrow.png" onmouseout="clearTimeout(scrollID1)" onmouseover="imgDirection=2; scrollOnImage()" />
</div>
</body>
</html>
Scroll2.html:不工作---------------------------------------- --
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
var div, scrollTop, scrollID, direction, imgDirection, scrollID1;
window.onload = function() {
div1 = document.getElementById("div1");
scrollTop = div1.scrollTop;
};
function scrollOnImage() {
if (imgDirection ==1 ) {
if (scrollTop != 0)
scrollTop--;
}
else if (imgDirection == 2) {
if (scrollTop != (div1.scrollHeight - 300))
scrollTop++;
}
div1.scrollTop = scrollTop;
scrollID1 = setTimeout("scrollOnImage()", 10);
}
</script>
</head>
<body>
<br />
<div style="border: solid 1px red; float: left; height:300px; max-height:300px; width:200px; overflow: hidden;" >
<table>
<tr>
<th style="height:20px;"><input type="image" src="images/LGbtn_off.png" alt="img1" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=1; scrollOnImage()" /></th>
<th>1A</th>
<th ><input type="image" src="images/RRbtn_off.png" alt="img2" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=2; scrollOnImage()" /></th>
</tr>
<tr>
<td colspan="3" style="height:280px; max-height:280px;">
<div id="div1">
<ul id="ulR_1A" class="ulli">
<li><span class="li_head">PCode:</span> 1234</li>
<li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li>
<li><span class="li_head">Qty:</span> 256</li>
<li><span class="li_head">Batch No:</span> 01AC950</li>
<li><span class="li_head">Manf Date:</span> 11/08/2012</li>
<li><span class="li_head">SS Date:</span>11/07/2013</li>
<li><span class="li_head">Total Pals:</span> 60</li>
<li><span class="li_head">Pals Occupied:</span> 59</li>
<li><span class="li_head">Bin Occupancy:</span> 89%</li>
<li><span class="li_head">Trn No:</span> 1234567890</li>
<li><span class="li_head">Bin Status:</span> Part Full</li>
</ul>
<ul id="ulR_1A" class="ulli">
<li><span class="li_head">PCode:</span> 1235</li>
<li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li>
<li><span class="li_head">Qty:</span> 256</li>
<li><span class="li_head">Batch No:</span> 01AC950</li>
<li><span class="li_head">Manf Date:</span> 11/08/2012</li>
<li><span class="li_head">SS Date:</span>11/07/2013</li>
<li><span class="li_head">Total Pals:</span> 60</li>
<li><span class="li_head">Pals Occupied:</span> 59</li>
<li><span class="li_head">Bin Occupancy:</span> 89%</li>
<li><span class="li_head">Trn No:</span> 1234567890</li>
<li><span class="li_head">Bin Status:</span> Part Full</li>
</ul>
<ul id="ulR_1A" class="ulli">
<li><span class="li_head">PCode:</span> 1236</li>
<li><span class="li_head">Product:</span> GX12x24 Medium Large 80</li>
<li><span class="li_head">Qty:</span> 256</li>
<li><span class="li_head">Batch No:</span> 01AC950</li>
<li><span class="li_head">Manf Date:</span> 11/08/2012</li>
<li><span class="li_head">SS Date:</span>11/07/2013</li>
<li><span class="li_head">Total Pals:</span> 60</li>
<li><span class="li_head">Pals Occupied:</span> 59</li>
<li><span class="li_head">Bin Occupancy:</span> 89%</li>
<li><span class="li_head">Trn No:</span> 1234567890</li>
<li><span class="li_head">Bin Status:</span> Part Full</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div style="border: solid 1px red; float: left">
<img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/upDownArrow.png" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=1; scrollOnImage()" /><br /><br />
<img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/downUpArrow.png" onMouseOut="clearTimeout(scrollID1)" onMouseOver="imgDirection=2; scrollOnImage()" />
</div>
</body>
</html>
请帮忙。
最佳答案
TD 上有 height、max-height、overflow 属性，但为了使这项工作，他们需要在 DIV 上，例如:
<div id="div1" style="height:280px; max-height:280px; overflow:hidden">
关于javascript - 无法在父级为 <td> 的 <div> 内滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9924607/