滾動進度條，但用於水平滾動

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/