堆栈内存溢出
  繁体   English   中英

无法在内部滚动 <div> 父母是谁 <td>

[英]Cannot scroll inside a <div> whose parent is <td>

 原文  2012-03-29 11:39:42  4   1    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 个解决方案

解决方案1
 0  2012-04-03 16:59:33

您在TD上具有height ， max-height ， overflow属性，但要使其正常工作，它们必须位于DIV ，例如： 

<div id="div1" style="height:280px; max-height:280px; overflow:hidden">

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 移动图像以及TD或DIV中的滚动条 td中的DIV找不到父项 父div在将子级拖入其中时不会滚动 无法从父级滚动到iframe中的div 在绝对定位父级中滚动Div 如何在父div中使用y-overflow-scroll匹配div？ td内的div重置td的宽度 单击滚动到父 div 溢出自动内的特定部分 如果父div内部有4个以上的div，则显示滚动箭头容器 TD内部的div溢出不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM