將滾動條添加到不需要它的頁面？

我已經使這個滾動效果在頁面滾動時開始生效。現在，我想在頁面上顯示一個滾動條，當它出現在起始位置時，所有div的寬度都是100％，而底部的所有div的寬度都是0％。將滾動條添加到不需要它的頁面？

編輯 - 基本上，我想控制一切的動畫我已經作出，而不是與wheel事件，但通過使用滾動條，控制DIV寬度使用scrollTop的等

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>

來源

2016-06-25 Dhruv Chadha

你所說的100％長度是什麼意思？全屏寬度？？我沒有得到你的關注。 – Manish

可能重複的[CSS - 溢出：滾動; - 始終顯示垂直滾動條（http://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar） – brod

不，我不能得到答案呢？。順便說一句，我編輯了描述以便更好地理解，@Manish –

這是使用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>

來源

2016-06-26 11:03:16

你能用文字解釋JS部分嗎？ @PetrShevtsov –

@DruveChadha我剛剛更新了答案。 –

所以只有獲得滾動條的方法是使用html {height = 100vh;}來超出頁面高度？ –

將滾動條添加到不需要它的頁面？

回答

相關問題