Add Scrollbar to a page that doesnt need it?

Question

I have made this scrolling effect that comes into action when page is scrolled. Now, i want to show a scrollbar on the page which when present at the starting position, all the divs are at 100% width and when at bottom, all divs are at 0% width.

EDIT - Basically I want to control whatever animation I have made, not with wheel event but by using a scrollbar, controlling the div widths using 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>

what do you mean by 100% length ? full width ?? I didn't get your concern. — Manish, Jun 25 '16 at 05:08
Possible duplicate of [CSS - Overflow: Scroll; - Always show vertical scroll bar?](http://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar) — 8eecf0d2, Jun 25 '16 at 05:24
No, i couldnt get an answer there. BTW i have edited the description for better understanding, @Manish — Dhruv Chadha, Jun 25 '16 at 15:57
@DhruvChadha I am having one concern. I am not able to get the vertical scroll using above snippet. Because height is given in %. You want to create a vertical scroll and call the change function upon scrolling. Am I correct ? — Manish, Jun 25 '16 at 17:22
Yes @Manish , I want to create a vertical scroll and call the change function upn scrolling, but i am unable to get a scroll as heights are in %. — Dhruv Chadha, Jun 26 '16 at 04:56

score 3 · Accepted Answer · edited May 23 '17 at 10:28

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

When a scroll events is handled it calculates the relative current scroll position in percents:

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

thus 100% means the very top scroll position, otherwise 0% means we're at the very bottom.

Reference: Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript.

Then we just apply this calculated value to the divs style.width parameters.

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>

Can you explain the JS part in words a litlle bit ? @PetrShevtsov — Dhruv Chadha, Jun 28 '16 at 05:00
so only way to get a scrollbar is to exceed the page height using html {height = 100vh;} ? — Dhruv Chadha, Jun 29 '16 at 09:37
@DhruvChadha We set `html`'s height taller than the visible height (i.e. `1000vh`) and `body`'s height equal to the visible height — `100vh`. — Petr Razumov, Jun 29 '16 at 14:37
is there any major difference between html and body @PetrShevtsov .....sry if this is a stupid question. — Dhruv Chadha, Jun 29 '16 at 17:18
@DhruvChadha This article explains the difference https://css-tricks.com/html-vs-body-in-css/ — Petr Razumov, Jun 29 '16 at 17:35

Add Scrollbar to a page that doesnt need it?

1 Answers1