這是我的第一篇文章。我是編碼新手，正在嘗試為我的投資組合撰寫案例研究。我想在左側添加一個“滾動條”作為“固定”的時間線，以便向下滾動它填充的頁面。這個網站有一些接近我想要完成的東西。他們在左側有一個小的紅色“滾動條”。
https://edesigninteractive.com/
uj5u.com熱心網友回復：
一種簡單的方法是將滾動位置除以主體物件的高度。
可以使用 獲得身體物件的高度var numerator = document.body.scrollTop。您的滾動位置稍微復雜一些。您將需要元素的高度減去視口的強度。這可以通過
var denominator = document.documentElement.scrollHeight - document.documentElement.clientHeight
從那里您設定一個事件偵聽器，將滾動條元素的高度設定為滾動時視圖高度的百分比。
document.addEventListener('scroll', function(e) {
document.getElementById('scrollBar').style.height = numerator/denominator '%'
});
可能有更好的方法可以做到這一點，但這是我想到的第一個方法。
uj5u.com熱心網友回復：
我修改了 alleynraven 答案，并將其放入codepen。
顯示代碼片段
var $scrollEl = document.querySelector('.scroll-progress')
document.addEventListener('scroll', function(e) {
var currentPos = document.documentElement.scrollTop;
var scrollPos = document.documentElement.scrollHeight - document.documentElement.clientHeight;
$scrollEl.style.height = (currentPos / scrollPos * 100) '%';
});.scroll-progress {
position: fixed;
left: 0;
top: 0;
width: 8px;
background-color: rgb(248 113 113);
}
.bg-blue {
background-color: rgb(186 230 253);
}
.bg-teal {
background-color: rgb(153 246 228);
}
.bg-lime {
background-color: rgb(217 249 157);
}
.bg-yellow {
background-color: rgb(254 240 138);
}<div class="scroll-progress"></div>
<div class="content">
<div class="bg-blue" style="height: 1000px;"></div>
<div class="bg-teal" style="height: 1000px;"></div>
<div class="bg-lime" style="height: 1000px;"></div>
<div class="bg-yellow" style="height: 1000px;"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/405781.html
標籤：
上一篇：在每個元素及其類上鍵入影片