将滚动条添加到不需要它的页面？

Question

我制作了这种滚动效果，当页面滚动时生效。现在，我想在页面上显示一个滚动条，当它出现在起始位置时，所有 div 的宽度都是 100%，而在底部时，所有 div 的宽度都是 0%。

编辑 - 基本上我想控制我制作的任何动画，不是使用wheel 事件，而是使用滚动条，使用 scrollTop 等控制 div 宽度。

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>

Answer 1

这是使用 CSS vh units 和滚动事件处理程序的解决方案。

当处理scroll 事件时，它会以百分比计算相对当前滚动位置：

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

因此 100% 表示最顶部的滚动位置，否则 0% 表示我们在最底部。

参考：Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript。

然后我们只需将这个计算值应用到divs 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>