Scorrere un particolare tag div

Question

ho questo codice:

#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>

Durante lo scorrimento verso l'alto e in basso, vorrei solo far scorrere il area div; Non voglio che il div scale si nasconda dal contenitore durante lo scorrimento.

Ho provato ad utilizzare position: fixed per il scale div, ma non si adattava in modo corretto con il rotolo di sinistra, questo caso mostra solo la 0 25 50 75, ma ogni punti scala vengono corrisponde al tag div zona in modo da visualizzare il tutto div tag 0,25,50,.. 150 con questi corrispondenti areas tag div

C'è un altro modo per farlo senza positon: fixed?

Lavoro di violino con postion: absolute. Ma i div points sono nascosti dal contenitore.

position: fixed. I tag div sul lato sinistro non sono visibili.

Answer 1

Vuoi qualcosa del genere?

https://jsfiddle.net/qk37kson/(Modificato: aggiunto un po 'di JQuery per far muovere orizzontalmente intestazione)

1) L'attributo id deve essere univoco. Ecco perché in JavaScript abbiamo getElementById e getElementsByClassName.

Da W3Schools:

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

L'attributo id specifica un ID univoco per un elemento HTML.

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

L'attributo classe specifica uno o più classnames per un elemento.

2) il cambiamento

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

a

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

3) allora, in voi CSS, aggiungere questo:

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

Edit:

4) Infine, aggiungere un po 'JQuery:

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

Answer 2

Si potrebbe continuare a .container 's overflow-y di nascosto e .area' s overflow-y per scorrere. In tal modo il contenitore scorre .scale e .area lungo x ma non y, ma lo .area scorre all'interno di al suo interno dando il tuo effetto.