Question

我有一个DIV容器，其中有一个SVG文件（大于DIV）。在同一个容器中，我有另一个DIV（让我们称之为DIV＃2）移动到我的SVG上，以帮助人们找到一些功能。当我滚动容器DIV时，我希望DIV＃2保持锚定在SVG上的相同位置，以便与所选特征的新位置保持一致（参见下面的Rect_Follow（）函数）。

有人可以帮助我在不使用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>

Answer 1

将position:relative添加到.SVG_container，然后移除JavaScript。

我希望这就是你的意思。

使用Javascript在DIV容器中滚动DIV

1 个答案: