Question

我要做的是在 vanilla JavaScript中实现一个进度条，以指示一个进度条与页面末尾的距离。但是，我遇到了一些问题。< / p>

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

自从我上次实现这样的功能以来已经有一段时间了，所以我接受了Stack Overflow并找到了this 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
}

不幸的是，上面的脚本出现了一些问题，我似乎无法弄清楚它是什么。由于某种原因，offset的值超过（有时低于）标记。我创建了一个 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来回跳转。

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

是否有人知道我哪里出错或为什么这些数字没有加起来？

Answer 1

请参阅我已对您的CODEPEN应用的更改

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用PrognRoll jQuery插件：

<强>实施例

CodePen

上的身体演示

<body>
<!-- Content -->
</body>

显示滚动进度指示器：

$(function() {
  $("body").prognroll();
});

或使用CSS和JavaScript（无插件）创建滚动指示器。

请参阅下面的实例：

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("headerBar").style.width = scrolled + "%";
  console.log(Math.round(scrolled * 100) / 100);
  document.getElementById("footerBar").style.width = scrolled + "%";
  document.getElementById("footerBar").innerHTML = Math.round(scrolled) + "%";
}

body {
  height: 2000px;
  text-align: center;
  font-family: arial;
  color: #333;
  margin: 0px;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.header h2 {
  text-align: center;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  width: 0%;
}

.content {
  padding: 50px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}

footer {
  width: 100vw;
  height: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ccc;
}

.footer-progress-bar {
  height: 20px;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  width: 0%;
  text-align: center
}

<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="headerBar"></div>
  </div>
</div>

<div class="content">
  <h2>Scroll down to see how it works</h2>
</div>

<footer>
  <div class="footer-progress-bar" id="footerBar">0%</div>
</footer>

滚动进度条

2 个答案: