javascript - 横向滚动或向下滚动

Question

所以我使用 https://css-tricks.com/examples/HorzScrolling/ 创建了一个网站它不再适用于最新版本的 chrome。我似乎找不到任何其他方法来模仿这个。要创建在桌面和移动设备上向上滚动或向右滚动的网站，最有效的方法是什么？

Answer 1

改编自 this CSS tricks post 的解决方案但是，根据 SO 政策，在答案中发布代码优于简单链接，因为这意味着即使链接资源不可用，答案仍然有效。有关该技术的详细说明，请阅读 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>