Scroll dany div tag

Question

mam ten kod:

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

Podczas przewijania do góry i na dole, chciałbym tylko, aby przewinąć area div; Nie chcę, aby element div ukrył się przed kontenerem podczas przewijania.

Próbowałem za pomocą position: fixed dla scale div, ale nie pasowała prawidłowo z przewijania w lewo, tylko w tym przypadku wyświetlenia 0 25 50 75, ale każdy z punktów skalowania są zgodne z tagiem Obszar div więc wyświetlić wszystkie div tag 0,25,50,.. 150 z odpowiednimi znacznikami div

Czy istnieje inny sposób zrobienia tego bez positon: fixed?

Praca skrzypce z postion: absolute. Ale elementy div points są ukryte w kontenerze.

position: fixed. Tagi po lewej stronie są niewidoczne.

Answer 1

Chcesz coś takiego?

https://jsfiddle.net/qk37kson/(redakcją: dodano trochę JQuery aby ruch nagłówka poziomo)

1) atrybut id musi być unikalne. Dlatego w JavaScript mamy getElementById i getElementsByClassName.

Od W3Schools:

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

atrybut id określa unikatowy identyfikator dla elementu HTML.

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

atrybut class określa jeden lub więcej classnames dla elementu.

2) zmiana

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

do

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

3) Następnie, w ty CSS, dodać to:

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

Edit:

4) Na koniec dodać trochę JQuery:

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

Answer 2

Można zachować .container 's overflow-y do ukrytych i .area' s overflow-y do przewijania. W ten sposób pojemnik będzie przewijany .scale i wzdłuż x, ale nie y, ale .area będzie przewijać w sobie y, dając ci efekt.