圖像不受滾動條

我有一個空div有滾動條：圖像不受滾動條

<div id="figure1" style="width:1000px; height:300px; overflow:scroll;"></div>

而且使用javascript我添加圖片到DIV：

function add_img(imgID, src, x, y, height, width){ 
    var img = document.createElement("img"); 
    img.setAttribute('id', imgID); 
    img.setAttribute('src', src); 
    img.style.left = x; 
    img.style.top = y; 
    img.style.width = width; 
    img.style.height = height; 
    img.style.position = 'absolute'; 
    document.getElementById('figure1').appendChild(img); 
}

當我添加一個1000x300px框外的新圖像，我希望該圖像僅在使用滾動條時可見。

相反，位於框外的圖像溢出圖1的邊緣。滾動條不做任何事情。

如何阻止圖像溢出？

謝謝！

來源

2017-03-06 J. Douglas

我不明白這一點：你要添加的圖像作爲如圖一的孩子，但它應該出現figure1之外？聽起來有點像z-index問題，但我不知道該怎麼理解你想要做什麼 –

嗨，對於混淆抱歉。圖1是一個1000x300px的框。如果我添加一個圖像來表示x = 2000 y = 100，我希望圖像在div邊界內可見，但只有當您向右滾動div 1000px時纔是可見的。相反，圖像在div的右側顯示1000px。 –

我看到兩個問題 - 首先你需要添加+ "px"到你的維度（至少如果你使用像我這樣的整數類型參數）。

另一件事將不會使用position = "absolute"。例如position = "relative"似乎有伎倆。（如果你喜歡，還進一步在CSS佈局選項，運氣好的話讀）

https://jsfiddle.net/xpsu9usw/

來源

2017-03-07 20:49:20

嗨，非常感謝你現在的作品！雖然我沒有說清楚，但我想能夠將圖像堆疊在一起，但是使用position：relative不允許。作爲解決方法，我添加了位置：相對於div和位置：圖像絕對。 –

圖像不受滾動條

回答

相關問題