Question

因此，我使用https://css-tricks.com/examples/HorzScrolling/创建了一个网站，该网站在最新版本的Chrome中不再有效。我似乎找不到任何其他方式来模仿这个。什么是创建在桌面和移动设备上向上滚动或侧滚动的网站最有效的方式？

Answer 1

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

＆＃13;

::-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);
}

＆＃13;

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

＆＃13;

水平滚动侧向或向下滚动

1 个答案: