无法在父级为</div>的<div>内滚动

时间：2012-03-29 11:39:42

标签： javascript html css

我有一个名为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>

请帮忙。

1 个答案:

答案 0 :(得分：0)

height上有max-height，overflow，TD个属性，但为了完成这项工作，他们需要在DIV上，例如：

<div id="div1" style="height:280px; max-height:280px; overflow:hidden">
相关问题
最新问题