Horizontal Scrolling on side or down scroll

Question

So I created a site using https://css-tricks.com/examples/HorzScrolling/ which no longer works in the latest version of chrome. I can't seem to find any other way to mimic this. What's the most effeicient way of creating a site that scrolls to the right on up or side scroll on desktop and mobile?

Answer 1

Solution adapted from this CSS tricks post but, according to SO policy, posting code in answers is preferred to simple links, as it means the answer remains valid even when the linked resource becomes unavailable. For detailed explanations on the technique read the post on CSS-Tricks.

::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}

body {
  background: #111;
}

div {
  box-sizing: border-box;
}

.horizontal-scroll-wrapper {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100vh;
  max-height: 100vw;
  margin: 0;
  padding-top: 1px;
  background: #abc;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transform: rotate(-90deg) translateY(-100vh);
          transform: rotate(-90deg) translateY(-100vh);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
.horizontal-scroll-wrapper > div {
  display: block;
  padding: 5px;
  background: #cab;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.squares {
  padding: 100vh 0 0 0;
}
.squares > div {
  width: 100vh;
  height: 100vh;
  margin: 10px 0;
}
.squares>div:last-child {
  margin-bottom: calc(-100vh + 10px);
}

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