滚动进度条 [英] Scrolling Progress Bar

问题描述

我想做的是实现一个进度条，以指示在原始JavaScript中到页面末尾有多近..但是，我遇到了一些问题. /p>

首先，尽管正在滚动body元素，但document.body.scrollTop始终返回0.我已经使用document.scrollingElement.scrollTop对此进行了整理.

自从我上一次实现这样的功能以来已经有一段时间了，所以我进入了Stack Overflow，发现了 CODEPEN 和过冲问题仍然存在，因此似乎问题出在公式本身.但是，当我查看这些数字(window.innerHeight，body.scrollTop等)时，似乎没有一个相加.下面是数字.

window.innerHeight ..................... 779
document.body.clientHeight ............ 3210
document.body.offsetHeight ............ 3212
document.body.scrollTop .................. 0
document.scrollingElement.scrollTop ... 2646

我也注意到了一些超级奇怪的行为.刷新页面时，document.body.clientHeight和document.body.offsetHeight会随机更改值，因此它们几乎总是从X to Y来回跳动.

值得注意的是，body元素本身的height为auto且没有垂直边距，尽管其某些子元素确实具有垂直边距.我正在从数据库中嵌入所有内容的main元素也具有height: auto，但是当我检查其scrollTop时，它也会返回0.

有人知道我要去哪里或者为什么数字没有加起来吗?

解决方案

请查看我已对您的CODEPEN进行的更改

 body {
	height: 300vh;
	background: black
}

footer {
	width: 100vw;
	height: 20px;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #fff
}

#footer__progress_bar {
	height: 20px;
	background: blue;
	width: 0%;
  text-align: center
} 

 <footer>
	<div id="footer__progress_bar">0%</div>
</footer>

<script>
window.onscroll = function() { ScrollIndicator() };

function ScrollIndicator() {
	var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	var scrolled = (winScroll / height) * 100;
	document.getElementById( 'footer__progress_bar' ).style.width = scrolled + "%";
	document.getElementById( 'footer__progress_bar' ).innerHTML = Math.round( scrolled ) + "%"
}
</script> 

What I'm trying to do is implement a progress bar to indicate how close one is to the end of the page in vanilla JavaScript. However, I'm running into a few issues.

First of all, although the body element is being scrolled, document.body.scrollTop always returns 0. I've sorted this out by using document.scrollingElement.scrollTop.

It's been a while since I last implemented a feature like this, so I took to Stack Overflow and found this thread, which jogged my memory a bit. From what I remember about the last time I implemented this feature, the formula should be something like the following, which was mentioned in that thread.

const progressBar = document.getElementById('footer__progress_bar')
const totalValue = document.body.scrollHeight - window.innerHeight

document.body.onscroll = () => {
  let currentValue = document.scrollingElement.scrollTop
  let offset = (currentValue / totalValue) * 100 - 100 + '%'
  progressBar.style.left = offset
}

Unfortunately something is off with the script above and I can't seem to figure out what it is. For some reason the value of offset overshoots (and sometimes undershoots) the mark. I've created a CODEPEN and the overshoot problem is persisting, so it seems as if the issue is the formula itself. Nonetheless, when I look at the numbers (window.innerHeight, body.scrollTop, et cetera), none of them seem to add up. Below are the numbers.

window.innerHeight ..................... 779
document.body.clientHeight ............ 3210
document.body.offsetHeight ............ 3212
document.body.scrollTop .................. 0
document.scrollingElement.scrollTop ... 2646

I've also noticed some super strange behaviour. document.body.clientHeight and document.body.offsetHeight will randomly change values when I refresh the page, so that they're almost constantly jumping back and forth from X to Y.

Notably, the body element itself has a height of auto and no vertical margins, albeit some of its children do have vertical margins. The main element, which is where I'm embedding everything from the database, also has height: auto, yet it also returns 0 when I check its scrollTop.

Does anybody have any idea where I'm going wrong or why the numbers aren't adding up?

解决方案

Please see the changes I have applied to your CODEPEN

body {
	height: 300vh;
	background: black
}

footer {
	width: 100vw;
	height: 20px;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #fff
}

#footer__progress_bar {
	height: 20px;
	background: blue;
	width: 0%;
  text-align: center
}

<footer>
	<div id="footer__progress_bar">0%</div>
</footer>

<script>
window.onscroll = function() { ScrollIndicator() };

function ScrollIndicator() {
	var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
	var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	var scrolled = (winScroll / height) * 100;
	document.getElementById( 'footer__progress_bar' ).style.width = scrolled + "%";
	document.getElementById( 'footer__progress_bar' ).innerHTML = Math.round( scrolled ) + "%"
}
</script>

这篇关于滚动进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！