使用Javascript滾動DIV容器內的DIV

我有一個DIV容器，其中有一個SVG文檔（大於DIV）。在這個容器中，我有另一個DIV（讓我們稱之爲DIV＃2）移動到我的SVG上，以幫助人們找到某些功能。當我滾動容器DIV時，我希望DIV＃2在我的SVG上保持錨定在相同的位置，以便與我所選功能的新位置保持一致（參見下面的Rect_Follow（）函數）。使用Javascript滾動DIV容器內的DIV

有人可以幫助我排除故障，而不使用jQuery？

下面的代碼的一小部分：

CSS：

<style type="text/css"> 
<!-- 
    div.SVG_container { 
     height:800px; 
     width:900px; 
     margin-top:250px; 
     overflow:scroll; 
    } 

    div.select_div { 
     position: absolute; 
     height: 98px; 
     width: 98px; 
     background: #CCF; 
     border: 1px solid #AAD; 
     text-align: center; 
     font-size: 10px; 
     border:1px solid black;  
     filter:alpha(opacity=60); /* for IE */ 
     opacity:0.6; /* CSS3 standard */  
    } 
--> 
</style>

HTML/JavaScript的：

<head> 
    <!-- ... --> 
    <script type="text/javascript"> 
     function Rect_Follow(obj){ 
      var rect = document.getElementById('arect');  
      rect.style.top = obj.scrollTop;  
     } 
    </script> 
</head> 
<body bgcolor="white"> 
    <div id="DivCont" class="SVG_container" onscroll="Rect_Follow(this)"> 
     <div id="arect" name="arect" class="select_div"></div> 
     <object id="aSVG" data="out.svg" style="margin-top:0px;overflow:hidden;" /> 
    </div> 
    <!-- ... --> 
</body>

來源

2011-05-26 pasta

添加position:relative至.SVG_container，並刪除的JavaScript。

我希望這是你的意思。

來源

2011-05-26 15:22:05 Midas

你真是太棒了！謝謝 – pasta 2011-05-26 15:28:56

使用Javascript滾動DIV容器內的DIV

回答

相關問題