relative scrolling

by tnhu

HTML

<div id="container">
  <p style="top: 0;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 30px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 60px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 90px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 120px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 150px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 180px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 210px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 240px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 270px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.</p>
  <p style="top: 300px;">Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic...

CSS

#container {
  background-color: #ccc;
  width: 400px;
  height: 200px;
  position: relative;
  overflow: scroll;
}

p {
  position: absolute;
  left: 50px;
  white-space: nowrap;
}