Прокрутите специальный тег div

У меня есть этот код:

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

Ответы

Ответ 1

Вам нужно что-то подобное?

https://jsfiddle.net/qk37kson/ (Отредактировано: добавлено немного JQuery, чтобы заголовок перемещался горизонтально)

1) Атрибут id должен быть уникальным. Поэтому в JavaScript имеем getElementById и getElementsByClassName.

Из W3Schools:

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

Атрибут id указывает уникальный идентификатор для элемента HTML.

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

Атрибут class указывает одно или несколько классов для элемента.

2) изменить

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

to

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

3), то в вашем CSS добавьте следующее:

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

Изменить:

4) Наконец, добавьте JQuery:

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

Ответ 2

Вы можете оставить .container overflow-y скрытым и .area overflow-y для прокрутки. Таким образом, контейнер будет прокручивать .scale и .area вдоль x, но не y, но .area будет прокручиваться вдоль y внутри себя, что даст вам эффект.