それを必要としないページにスクロールバーを追加しますか？

Question

私は、このスクロール効果を、ページがスクロールされたときに動作させるようにしました。今、私は、開始位置に存在するとき、すべてのdivが100％幅にあり、下にあるとき、すべてのdivが0％幅にあるページにスクロールバーを表示したい。などscrollTopスプライトを使用してdivの幅を制御する基本的に私は私が作ったものは何でもアニメーションコントロールしたい、ではないwheelイベントではなく、スクロールバーを使用することにより、

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

-

EDIT CSS vh unitsとスクロールイベントハンドラを使用したソリューションは次のとおりです。 scrollイベントがそれを扱っている

は

パーセントで相対的な現在のスクロール位置を計算します。

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

ので、100％が非常にトップスクロール位置を意味し、そうでなければ0％は、我々は一番下にいることを意味します。

参照：Cross-Browser Method to Determine Vertical Scroll Percentage in 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>