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

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/