Question

我查看了多个获取窗口偏移量的公式，其中，当滚动到顶部时，偏移量为0，当滚动到底部时，偏移量为offsetHeight。没有一个工作。有些人在顶部时给出0，但在底部时给出正确的高度，反之亦然。

这是我得到的最近的东西：

document.addEventListener('scroll', setBackgroundColor)

function setBackgroundColor() {
  let offset = (window.innerHeight + window.scrollY) / document.body.offsetHeight
  console.log(offset, window.innerHeight + window.scrollY, document.body.offsetHeight)
}

html,
body {
  margin: 0;
  padding: 0;
  height: 500vh;
}

我最接近零的是0.2，但是高度很好。获得0和scrollHeight的公式是什么？

Answer 1

要在一个除法中获得0，您需要使运算符的左侧等于0（0除以0总是0）。在您的情况下，它总是等于大于0的值，因为您要进行一个总是大于0的数字与另一个大于等于0的数字的加法运算。

尝试将滚动位置除以文档高度减去窗口滚动：

document.addEventListener('scroll', setBackgroundColor)

function setBackgroundColor() {
  let offset = window.scrollY / (document.body.offsetHeight - window.innerHeight)
  console.log(offset, window.innerHeight + window.scrollY, document.body.offsetHeight)
}

html,
body {
  margin: 0;
  padding: 0;
  height: 500vh;
}

Answer 2

与Karl-AndréGagnon解决方案略有不同（因为正如我所评论的，它在页面底部得到的值大于1）。使用document.body.scrollHeight代替document.body.offsetHeight：

let offset = window.scrollY / (document.body.scrollHeight - window.innerHeight)

滚动时获取滚动百分比在0到1之间

2 个答案: