0

I am trying to make a scroll progress bar like the one offer by https://scrollprogressbar.github.io/ . The only problem being is that my website has been flipped so I can make horizontal scrolling.

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

In short my website scroll horizontally so it doesn't give out vertical value rendering the scroll progress bar inept. What should I do?

Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
Kiet-del
  • 1
  • Can you give the complete code, it is hard to figure out in the provided code! – Manas Khandelwal Mar 28 '21 at 10:10
  • There is already a solution here https://stackoverflow.com/questions/62550184/how-to-amend-javascript-for-progress-bar-to-track-scrolling-on-a-horizontal-webs – b7afonso Sep 18 '21 at 06:06

1 Answers1

1

use this.

scroll-direction: horizontal;

Docs Link: https://css-tricks.com/pure-css-horizontal-scrolling/

Hasham Minhas
  • 436
  • 3
  • 13