gpt4 book ai didi

javascript - 使用 Javascript 滚动 DIV 容器内的 DIV

转载 作者:行者123 更新时间:2023-11-28 21:21:52 25 4
gpt4 key购买 nike

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

最佳答案

position:relative 添加到 .SVG_container,并删除 JavaScript。

我希望这就是你的意思。

关于javascript - 使用 Javascript 滚动 DIV 容器内的 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6140470/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com