Add a scroll bar to a page that doesn't need it?

Question

I made this scroll effect, which takes effect when scrolling the page. Now, I want to show the scroll bar on the page, which, when it is present in the starting position, all divs are 100% wide, and at the bottom - all divs are 0% wide.

EDIT . Basically I want to control any animation that I created, not with an event wheel, but with a scrollbar controlling the width of the div with scrollTop, etc.

var leftDiv = document.querySelectorAll(".lcurtain");
var rightDiv = document.querySelectorAll(".rcurtain");
var locker = document.getElementById("locker");
document.addEventListener("wheel", change);
var per = 100;
var angle = 0;

function change(e) {
  if (e.deltaY > 0 && per > 0) {
    for (var i = 0; i < 4; i++) {
      leftDiv[i].style.width = per - 1 + "%";
      rightDiv[i].style.width = per - 1 + "%";
    }
    per -= 1;
  } else if (e.deltaY < 0 && per < 100) {
    for (var i = 0; i < 4; i++) {
      leftDiv[i].style.width = per + 1 + "%";
      rightDiv[i].style.width = per + 1 + "%";
    }
    per += 1;
  }
}

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
.lcurtain,
.rcurtain {
  width: 100%;
  height: 12.5%;
  position: absolute;
}
#div1 {
  top: 0;
  left: 0;
  background-color: blue;
}
#div2 {
  top: 12.5%;
  right: 0;
  background-color: red;
}
#div3 {
  top: 25%;
  left: 0;
  background-color: green;
}
#div4 {
  top: 37.5%;
  right: 0;
  background-color: purple;
}
#div5 {
  top: 50%;
  left: 0;
  background-color: orange;
}
#div6 {
  top: 62.5%;
  right: 0;
  background-color: cyan;
}
#div7 {
  top: 75%;
  left: 0;
  background-color: brown;
}
#div8 {
  top: 87.5%;
  right: 0;
  background-color: pink;
}

<div id="div1" class="lcurtain"></div>
<div id="div2" class="rcurtain"></div>
<div id="div3" class="lcurtain"></div>
<div id="div4" class="rcurtain"></div>
<div id="div5" class="lcurtain"></div>
<div id="div6" class="rcurtain"></div>
<div id="div7" class="lcurtain"></div>
<div id="div8" class="rcurtain"></div>
<script src="script.js"></script>

Run code

Answer 1

Here's a solution using CSS vh units and a scroll event handler.

scroll, :

100 - (scrollTop / (scrollHeight - clientHeight) * 100)

, 100% , 0% , .

: Javascript.

div style.width.

var leftDiv = document.querySelectorAll(".lcurtain");
var rightDiv = document.querySelectorAll(".rcurtain");
document.addEventListener("scroll", change);

function change(e) {
  var h = document.documentElement;
  var b = document.body;
  var st = 'scrollTop';
  var sh = 'scrollHeight';
  var percent = 100 - (h[st] || b[st] / ((h[sh] || b[sh]) - h.clientHeight) * 100) + "%";

  for (var i = 0; i < 4; i++) {
    leftDiv[i].style.width = percent;
    rightDiv[i].style.width = percent;
  }
}

html {
  width: 100%;
  height: 1000vh;
}
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: fixed;
}
.lcurtain,
.rcurtain {
  width: 100%;
  height: 12.5%;
  position: absolute;
}
#div1 {
  top: 0;
  left: 0;
  background-color: blue;
}
#div2 {
  top: 12.5%;
  right: 0;
  background-color: red;
}
#div3 {
  top: 25%;
  left: 0;
  background-color: green;
}
#div4 {
  top: 37.5%;
  right: 0;
  background-color: purple;
}
#div5 {
  top: 50%;
  left: 0;
  background-color: orange;
}
#div6 {
  top: 62.5%;
  right: 0;
  background-color: cyan;
}
#div7 {
  top: 75%;
  left: 0;
  background-color: brown;
}
#div8 {
  top: 87.5%;
  right: 0;
  background-color: pink;
}

<div id="div1" class="lcurtain"></div>
<div id="div2" class="rcurtain"></div>
<div id="div3" class="lcurtain"></div>
<div id="div4" class="rcurtain"></div>
<div id="div5" class="lcurtain"></div>
<div id="div6" class="rcurtain"></div>
<div id="div7" class="lcurtain"></div>
<div id="div8" class="rcurtain"></div>