Ermitteln, ob ein Prozentsatz eines untergeordneten Containers in einem übergeordneten Bildcontainer angezeigt wird

Question

Ich spiele jetzt schon seit ein oder zwei Stunden mit dem Papier herum, aber es scheint, als würde es ein wenig hängen bleiben. Angesichts des Szenarios, in dem ich einen übergeordneten Container habe, der 100% breit ist (passt an die übergeordnete Breite, die eine beliebige Größe in Pixeln haben kann), die untergeordnete Container enthält, die einen prozentualen Anteil ihrer Größe haben (in diesem Beispiel 90%) Ich erkläre, wann ein Kind-Container eine prozentuale Menge im Blick hat (sagen wir 80%)? Das Endergebnis davon ist zu bestimmen, welchen Child-Container Sie derzeit sind, sagen 1/4 oder 3/4 usw. Die Anzahl der untergeordneten Container ist variabel, es kann manchmal 1 sein, es kann 100 sein.

Die Breite des Untercontainers für untergeordnete Container kann variieren, sie sind jedoch immer für alle untergeordneten Elemente identisch, z. B. alle 90% des übergeordneten Containers oder alle 100% der Breite.

Ich habe ein grobes Diagramm gezeichnet, um es hoffentlich ein wenig einfacher zu verstehen.

So im Beispiel Bild oben, würden wir derzeit auf Schlitten 1 von 3 sein, aber wenn wir nach rechts und 80% des grünen Containers war nun im Hinblick gescrollt, würden wir sein auf Folie 2 von 3 usw. Der schwarze Container ist in diesem Fall der Elternteil.

Die resultierende mathematische Lösung wird in JavaScript implementiert.

Answer 1

Sie können den Prozentsatz eines Kindes sichtbar mit einer Funktion wie folgt berechnen:

function calculateVisiblePercentage(childLeft, childWidth, containerOffset, containerWidth){ 

    // Position of the left side of the child, 
    // or the container left side if the child 
    // starts before the left side of the container 
    var x0 = Math.max(containerOffset, childLeft); 

    // Position of the right side of the child, 
    // or the container right side if the child 
    // ends after the right side of the container 
    var x1 = Math.min(containerOffset + containerWidth, childLeft + childWidth); 

    if (x1 < x0){ 
    // It's not visible 
    return 0; 
    } 

    var pixelsVisible = x1 - x0; 

    // Percentage 
    return pixelsVisible * 100/childWidth; 
}; 

Wo childLeft die Position der linken Seite des Kindes ist. Wenn die Kinderbreite beispielsweise 100 Pixel beträgt, wäre dies 0 für das erste Kind, 100 für die Sekunde usw. Und containerOffset ist die Position/das Bild des Containers.

Sie können ein grundlegendes Arbeitsbeispiel in this JSFiddle sehen.

Answer 2

Grundsätzlich möchten Sie die aktuelle Position des Foliencontainers übernehmen und diese durch die Breite des übergeordneten Containers teilen.

So würde das aussehen: Math.round (Math.abs (currentPosition)/containerWidth);

Der niedrigste mögliche Wert ist Null, was der ersten Folie entsprechen würde.

Siehe mein Kommentar unten für ein Beispiel dafür in Aktion.