Horizontal scroll (simple example)

horizontal-scroll-simple-example.markdown

Horizontal scroll (simple example)

A Pen by Kristian Bjørnard on CodePen.

License.

index.html

<div class="rainCoat">
  <div class="horizontal-scroll-wrapper squares">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
  </div>
  <div class="horizontal-scroll-wrapper squares">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
  </div>
  <div class="horizontal-scroll-wrapper squares">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
  </div>
  <div class="horizontal-scroll-wrapper squares">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
  </div>
  <div class="horizontal-scroll-wrapper squares">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
  </div>
  <div class="horizontal-scroll-wrapper squares">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
  </div>
  <div class="horizontal-scroll-wrapper squares">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
  </div>
  <div class="horizontal-scroll-wrapper squares">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
  </div>

</div>

script.js

/*
This Codepen is in the Public Domain.
You can use it for whatever purpose you like, except evil.
*/

style.scss

$finalHeight: 250px;
$finalWidth: 3 * $finalHeight;
$scrollBarHeight: 1px;

::-webkit-scrollbar {
  width: $scrollBarHeight;
  height: $scrollBarHeight;
}

::-webkit-scrollbar-button {
  width: $scrollBarHeight;
  height: $scrollBarHeight;
}

body {
  background: #111;
}

div {
  box-sizing: border-box;
}

.horizontal-scroll-wrapper {
  position:absolute;
  top:0;
  left:0;
  display: block;
  width: calc(#{$finalHeight} + #{$scrollBarHeight});
  max-height: $finalWidth;
  margin: 0;
  padding-top: $scrollBarHeight;
  background: #abc;
  overflow-y: auto;
  overflow-x: hidden;
  transform: rotate(-90deg) translateY(-$finalHeight);
  transform-origin: right top;
  & > div {
    display: block;
    padding: 5px;
    background: #cab;
    transform: rotate(90deg);
    transform-origin: right top;
  }
}

.horizontal-scroll-wrapper:nth-child(2) {
  top: calc(#{$finalHeight} + 1em);
}

.horizontal-scroll-wrapper:nth-child(3) {
  top: calc(2 * #{$finalHeight} + 2em);
}

.horizontal-scroll-wrapper:nth-child(4) {
  top: calc(3 * #{$finalHeight} + 3em);
}

.squares {
  padding: $finalHeight 0 0 0;
  & > div {
    width: $finalHeight;
    height: $finalHeight;
    margin: 10px 0;
  }
}

.rainCoat {
  position: relative;
}