滾動內容上時底層圖像被滾動

我有一個div重疊在圖象重疊的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或任何其他插件實現這種行爲。任何建議，將不勝感激。

來源

2012-11-11 ratty

爲什麼不使用圖像的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>

來源

2012-11-12 00:49:17 admoghal

感謝您的建議。我曾嘗試將圖片用作背景圖片而不是單獨的「img」元素。它確實克服了將圖像和疊加div作爲單獨實體的問題，但它似乎與生成滾動條有關。 – ratty

基於從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，但由於「背景大小」不是在IE中一個有效的屬性，我只好用backgroundSize插件從http://louisremi.github.com/jquery.backgroundSize.js/demo/到使其在IE中工作。雖然，現在我已經結束了使用RaphaelJS插件並使用其圖像函數在視口上顯示圖像。

來源

2012-11-12 22:20:11 ratty

我遇到了同樣的問題，一個編輯，我正在寫：溢出：包含圖像自動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>

來源

2013-11-27 09:06:10 AnotherHowie

滾動內容上時底層圖像被滾動

回答

相關問題