Ich habe eine Hauptdiv (mit fester Höhe und Scroll-X und Scroll-Y):

<div style="position:relative;border:solid 2px #000;overflow-y:scroll;overflow-x:scroll; height:200px; width:100%;" id="pippo">
</div>

Und eine Reihe von untergeordneten Divs, die dynamisch in js erstellt und mit absoluter Position in das übergeordnete Div eingefügt wurden:

<div style='z-index:3;position:absolute; top: 50px; left: "+pos+"px;border:solid 1px;'>m</div>

Diese Divs können überall erstellt werden, auch über die Höhe und Breite des übergeordneten Divs hinaus (es ist mir egal, weil ich die Bildlaufleisten bekomme).

Mein Problem ist: Es gibt andere untergeordnete Divs (erstellt in js), die einen Hintergrund wie ein Diagramm darstellen. Die Divs haben einen Rand und eine Breite von 100%. Ein Beispiel für einen von ihnen:

<div style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+yyy+"px;'>0</div>

Wenn Javascript die Divs dynamisch erstellt, aktualisiert der Hintergrund seine Breite nicht auf die neue (wenn die Divs über die übergeordneten Kennzahlen hinausgehen).

Wenn Sie also nach rechts scrollen, sehen Sie den Hintergrund nicht. Wie kann ich dem Hintergrund die richtige Breite (100%) geben, wenn die übergeordnete Breite dynamisch geändert wird?

http://jsfiddle.net/4x2KP/157/

Danke an alle!

1
Stefano Nino Mancini 17 Aug. 2015 im 16:56

3 Antworten

Beste Antwort

Ich habe daran gearbeitet, wenn Sie den Achsendivs eine bestimmte Klasse hinzufügen können.

Sie können das Bildlaufereignis auf dem #pippo anhören und den Versatz der Achse anpassen, da dieser horizontal innerhalb des #pippo festgelegt ist. Möglicherweise müssen Sie jedoch den Ziffern- und den Achsenlinien-Teil trennen, um den Ziffern-Teil durch die Bildlaufleiste beweglich zu machen.

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>
0
fuyushimoya 17 Aug. 2015 im 16:50

Ich bin nicht sicher, ob Sie danach fragen, aber dieser Code erstellt diese Hintergrundzeilen gleichzeitig mit dem Schreiben der Buchstaben.

Sie können es einfach anpassen, indem Sie die "width" -Vari ändern.

var t = 250;
$(document).ready(function(){
	crea_bg();
    setTimeout(function(){ pippo(); }, t);
});
var pos = 0;
function pippo(){
    pos = pos + 30;
    crea_bg();
    $("#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;
    
	var width = pos + 30;
    
	$("#pippo").append("<div style='z-index:2;border-bottom:solid 1px #ccc;" 
		+"color:#ccc;position:absolute;width:"+width+"px;bottom:"+yyy+"px;'>0</div>");
    
	for (i = 25; i <= 300; i=i+25) {
		$("#pippo").append("<div style='z-index:2;border-bottom:solid 1px #ccc;"
        	+" color:#ccc;position:absolute;width:"+width+"px;bottom:"+(yyy+(-i))+"px;'>"+(-i)+"</div>");
		$("#pippo").append("<div style='z-index:2;border-bottom:solid 1px #ccc;"
        	+ "color:#ccc;position:absolute;width:"+width+"px;bottom:"+(yyy+(i))+"px;'>"+i+"</div>");
	}
}
<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>
0
w0l1w00d 17 Aug. 2015 im 14:46

Vermeiden des typischen Dokumentenflusses

Wenn Sie den typischen Dokumentenfluss vermeiden müssen, müssen Sie einen weiteren Container zwischen <div id="pippo"> und seinen untergeordneten Elementen einfügen und dann die Breite / Höhe des neuen Containers nach Bedarf manuell aktualisieren.

Im typischen Dokumentenfluss bleiben

Wenn Sie den normalen Dokumentfluss nicht umgehen müssen und nur nach einer Möglichkeit suchen, ein übergeordnetes Element zu erweitern, verwenden Sie eine Kombination aus display: inline-block und white-space: nowrap:

$(document).ready(function() {
	setInterval(function() {
        $('#pippo').append('<div class="childDiv">m</div>')
    }, 250);
});
#pippo {
    border: solid 2px #000;
    height: 200px;
    width: 100%;
    overflow-y: scroll;
    overflow-x: scroll;
    white-space: nowrap;
}

.childDiv {
    display: inline-block;
    border: solid 1px #000;
    margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<div id="pippo"></div>
0
BDawg 17 Aug. 2015 im 16:22