Question

我正在尝试制作一个滚动进度条，就像 https://scrollprogressbar.github.io/ 的报价一样。唯一的问题是我的网站被翻转了，所以我可以进行水平滚动。

.wrapper-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

<div class="wrapper-wrapper">
  <div class="wrapper"></div>
</div>

简而言之，我的网站水平滚动，因此它不会给出使滚动进度条无能为力的垂直值。我该怎么办？

Answer 1

使用这个。

scroll-direction: horizontal;

文档链接：https://css-tricks.com/pure-css-horizontal-scrolling/

滚动进度条但用于水平滚动

1 个答案: