Question

我有一个div覆盖图像。顶部div有一些交互式创建的svg内容。底层图像有滚动条。当我滚动图像时，我希望覆盖div的内容也相应地滚动。换句话说，在顶部div上交互式创建的任何项目应该像在图像上直接创建的那样。它应该具有相对于底层图像的固定位置，并在滚动图像时滚动。

以下是我所拥有的：

<div style="overflow: scroll; width: 800px; height: 680px">
          <img style="max-width: 780px; display: block;"
            src="someimage.png" />

        <div style="display: block; max-width: 780px; top:70px; left:0px; border: solid 1px red; position: absolute">This text should scroll when the image behind is scrolled.</div>

    </div>

我愿意使用jquery或任何其他插件来实现此行为。任何建议将不胜感激。

Answer 1

为什么不使用图像作为div的背景并输入div中的任何内容都将位于图像顶部

尝试以下

<div style="display: block; max-width: 780px; padding-top:70px; left:0px; border: solid 1px red;  background-image: url(someimage.png); height:1200px;">This text should scroll when the image behind is scrolled.</div>

Answer 2

根据admoghal的建议，我尝试了以下内容：

<div style="width: 900px; height: 600px; overflow-y: scroll; overflow-x: hidden; display: block; position: absolute;">
   <div class="scales" id="holder" style='left: 0px; top: 0px; width: 1200px; height: 1000px; overflow: hidden; display: block; position: relative; max-height: 1000px; max-width: 1200px; background-repeat: no-repeat; background-image: url("someimage.png"); background-size: contain;'>
   </div>
</div>

这在Firefox中工作正常，但由于“background-size”不是IE中的有效属性，我不得不使用http://louisremi.github.com/jquery.backgroundSize.js/demo/中的backgroundSize插件使其在IE中工作。虽然，现在我最终使用RaphaelJS插件并使用其图像功能在视口上显示我的图像。

Answer 3

我遇到了与我正在编写的编辑器相同的问题：溢出：包含图像的自动div和用于动态注释图像的SVG覆盖。这对我有用（amdoghal的背景图像线索指出了我正确的方向 - dummy-map.png是我正在注释的图像。）

<div id="wme_map" style="height: 800px; border: 1px solid black; padding:0; overflow: auto;">
    <div id="svg-overlay"  style="width: 1920px; height: 1080px; background-image: url(dummy-map.png)">
        <svg width="1920" height="1080">
            <rect x=20 y=20 width=200 height=32 style="stroke:red; fill:none; stroke-width:2;" />
        </svg>
    </div>              
</div>

滚动基础图像时滚动覆盖div上的内容

3 个答案: