Scroll ein bestimmtes Div-Tag

Ich habe diesen Code:Scroll ein bestimmtes Div-Tag

#points{ 
 
    width:25%; 
 
    background:#2a2a2a; 
 
    height:20px; 
 
    color:white; 
 
    z-index:2; 
 
    position:absolute; 
 
} 
 
#areas{ 
 
    position:absolute; 
 
    color:white; 
 
    border-right:2px solid black; 
 
    height:120%; 
 
}

<div class="container" style="width:100%"> 
 
    <div class="scale" style="width:100%; position:relative;"> 
 
    <div id="points" style="left:0; ">0</div> 
 
    <div id="points" style="left:25%;">25</div> 
 
    <div id="points" style="left:50%;">50</div> 
 
    <div id="points" style=" left:75%;">75</div> 
 
    <div id="points" style=" left:100%;">100</div> 
 
    <div id="points" style=" left:125%;">125</div> 
 
    <div id="points" style=" left:150%;">150</div> 
 
    </div> 
 

 
    <div class="area" style="width:100%; background:orange;"> 
 
    <div id="areas" style="left:0;"></div> 
 
    <div id="areas" style="left:25%;"></div> 
 
    <div id="areas" style="left:50%;"></div> 
 
    <div id="areas" style="left:75%;"></div> 
 
    <div id="areas" style="left:100%;"></div> 
 
    <div id="areas" style="left:125%;"></div> 
 
    <div id="areas" style="left:150%;"></div> 
 
    <div id="areas" style="left:175%;"></div> 
 
    </div> 
 
</div>

Während nach oben und unten scrollen, würde ich nur gerne die area div blättern; Ich möchte nicht, dass sich das scale Div beim Scrollen aus dem Container versteckt.

Ich versuchte position: fixed für die scale div verwenden, aber es passte nicht richtig mit der linken Scroll, ist dieser Fall nur die 0 25 50 75 angezeigt, aber jeder Skalenpunkte sind auf den Bereich Div-Tag entsprechen, so das alle div-Tag Anzeige 0,25,50,.. 150 mit diesen entsprechenden areas div Tags

Gibt es einen anderen Weg, es ohne positon: fixed zu tun?

Arbeitsgeige mit postion: absolute. Aber die points Divs sind aus dem Container versteckt.

position: fixed. Linke Seite div Tags sind nicht sichtbar.

Quelle

2015-05-07 Anonymous

Vielleicht könnte man nur das 'area' div scrollen und nicht den ganzen' container'? Setze eine feste Höhe auf 'area' und' overflow: auto' und es sollte den Trick machen – Dygestor

@Dygestor Ich möchte den gesamten Container scrollen. –

Können Sie vielleicht ein JSFiddle erstellen, damit wir genau sehen können, was Sie erreichen möchten? – Dygestor

Wollen Sie so etwas?

https://jsfiddle.net/qk37kson/(Edited: added ein wenig JQuery den Header bewegen sich horizontal zu machen)

1) Das Attribut id eindeutig sein. Deshalb haben wir in JavaScriptgetElementById und getElementsByClassName.

Von W3Schools:

http://www.w3schools.com/tags/att_global_id.asp

Das id-Attribut gibt eine eindeutige ID für ein HTML-Element.

http://www.w3schools.com/tags/att_global_class.asp

das Klassenattribut gibt ein oder mehrere Klassennamen für ein Element.

2) Veränderung

<div class="scale" style="width:100%; position:relative;">

<div id="scale" style="width:100%; position:fixed;">

3) dann, in Sie CSS, fügen Sie diese:

#scale { 
    top:0px; 
    left:0px; 
    z-index:2; 
}

Edit:

4) Schließlich fügen Sie einige JQuery:

$(window).scroll(function(){ 
    $('#scale').css('left','-'+$(window).scrollLeft()+'px'); 
});

Quelle

2015-05-07 11:47:24 Seblor

Jede Zeile, die den 'Punkten' in Ihrem Fall entspricht, zeigt nur die' 0 25 50 75' an. Aber ich möchte alle Punkte anzeigen. In diesem Fall ist "Position: relativ" für mich geeignet, aber das Problem der relativen Position war, wenn die oberen und unteren Scrollpunkte aus dem Bereich ausgeblendet werden. –

Oh, ich sah nicht, dass der Header überhaupt nicht bewegt werden konnte. Ich habe ein bisschen JQuery hinzugefügt, um das zu machen. – Seblor

Ich habe keine Antwort gefunden, das ist mein Fehler. Entschuldigung und sehen Sie die https://jsfiddle.net/qk37kson/1/. Und danke für deine Mühe für mich –

Sie könnten .container 's overflow-y zu versteckt und .area' s overflow-y blättern halten. Dadurch würde der Behälter .scale und .area entlang x bewegen, aber nicht y, aber die .area scrollt entlang y in sich selbst Sie Ihre Wirkung.

Quelle

2015-05-11 08:24:27 Gouthamm4G

Scroll ein bestimmtes Div-Tag

Antwort

Verwandte Themen