我有一个主 div(具有固定高度和滚动 x 和滚动 y):
<div style="position:relative;border:solid 2px #000;overflow-y:scroll;overflow-x:scroll; height:200px; width:100%;" id="pippo">
</div>
以及一堆在js中动态创建的子div并以绝对位置插入到父div中:
<div style='z-index:3;position:absolute; top: 50px; left: "+pos+"px;border:solid 1px;'>m</div>
这个 div 可以在任何地方创建,也可以超出父 div 的高度和宽度(我不在乎,因为我得到了滚动条)。
我的问题是: 还有其他子 div(用 js 创建)代表图表等背景。 div 有边框且宽度为 100%。其中之一的示例:
<div style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+yyy+"px;'>0</div>
当 javascript 动态创建 div 时,背景不会将其宽度更新为新宽度(如果 div 超出父级尺寸)。
所以,如果您向右滚动,您将看不到背景。 当父宽度动态更改时,如何为背景提供正确的宽度(100%)?
http://jsfiddle.net/4x2KP/157/
谢谢大家!
最佳答案
如果您可以向轴 div 添加特定的类,我已经解决了这个问题。
您可以监听#pippo
上的滚动事件并调整轴的偏移量,因为它在#pippo
内水平固定。但您可能必须将数字部分和轴线部分分开,以使数字部分可以通过滚动条移动。
var t = 250;
var $axis;
var offsets;
$(document).ready(function(){
crea_bg();
setTimeout(function(){ pippo(); }, t);
});
var pos = 0;
function pippo(){
pos = pos + 30;
$("#pippo").append("<div style='z-index:3;position:absolute; top: 50px; left: "+pos+"px;border:solid 1px;'>m</div>");
setTimeout(function(){ pippo(); }, t);
}
function crea_bg(){
var yyy = 0;
$("#pippo").append("<div class='axis' style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+yyy+"px;'>0</div>");
for (i = 25; i <= 300; i=i+25) {
$("#pippo").append("<div class='axis' style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+(yyy+(-i))+"px;'>"+(-i)+"</div>");
$("#pippo").append("<div class='axis' style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+(yyy+(i))+"px;'>"+i+"</div>");
}
$axis = $('.axis').css('left', 0);
}
$('#pippo').scroll(function() {
//var currentLeft = parseFloat($axis.css('left'));
//console.log($axis.css('left'), currentLeft, $axis.position().left);
//$axis.css('left', currentLeft - $axis.position().left);
$axis.css('left', '-=' + $axis.position().left);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div style="position:relative;border:solid 2px #000;overflow-y:scroll;overflow-x:scroll; height:200px; width:100%;" id="pippo">
</div>
关于javascript - 如何在父div中插入其他元素后动态更新子div宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32052290/