获取滚动位置的百分比[重复]

Posted 2023-02-21

【中文标题】获取滚动位置的百分比[重复]

【英文标题】：Get percentage of scroll position [duplicate]

【发布时间】：2015-04-24 23:40:16

【问题描述】：

问题：

计算的数学公式是什么（无论 scrollHeight 文档）滚动条的底部距离它的总底部（这将是页面的末尾）有多远。因此，例如，当滚动条位于顶部时，我会说它底部与文档底部的距离百分比为 0%，并且当它完全滚动时一路（垂直），它将是 100%。

我的目标：

我的目标是计算底部和特定位置之间有多少像素，例如相对于视口在底部上方的 3%。同样，文档高度应该没有任何意义。 3% 是相对于视口而言的 3%。

已知变量：

var P              = 3 // in %
var totalHeight    = document.documentElement.scrollHeight;
var viewportHeight = document.documentElement.clientHeight;

【问题讨论】：

我相信您正在寻找offset() => viewportHeight - document.getElementById('mybottom').offset().top 或类似的东西。

@TimVermaelen - 如果您在此处打开它，您可以在控制台中轻松查看它。使用getElementById 与我需要的无关。想象一下，body 中根本没有节点，并且它具有来自 CSS 的动态高度......

jsfiddle.net/ywy9ndao ? 编辑： 似乎只在 Chrome 中有效

@blex - 可怕的代码。我修好了 - jsfiddle.net/ywy9ndao/1

@vsync 哈哈，我不想在发布之前费心修复它，因为我什至不确定那是你想要的。我只是随机尝试了一些东西。

【参考方案1】：

返回0 到100 之间相对于滚动位置的数字：

document.onscroll = function() 
  var pos = getVerticalScrollPercentage(document.body)
  document.body.innerhtml = "<span>" + Math.round(pos) + "%<span>"


function getVerticalScrollPercentage( elm )
  var p = elm.parentNode
  return (elm.scrollTop || p.scrollTop) / (p.scrollHeight - p.clientHeight ) * 100

body height:2000px 
span position:fixed; font:5em Arial; color:salmon; 

---

● Difference between scrollHeight & clientHeight

【参考方案2】：

当您滚动到底部时，最终位置值等于文档的高度减去一个屏幕（视口）的高度。所以如果你计算：

scrollPositionRelative = scrollPosition / (documentHeight - viewportHeight);

如预期的那样，值将在 0-1 范围内。

这是最后给出的示例中使用的函数。

function getScrollPosition () 
  var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); // Viewport height (px)
  var scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // Current scroll position (px)
  var documentHeight = $(document).height(); // Document height (px)
  var scrollPositionRelative = scrollPosition / (documentHeight - viewportHeight); // The document height is reduced by the height of the viewport so that we reach 100% at the bottom
  return 
    documentHeight: documentHeight,
    relative: scrollPositionRelative,
    absolute: scrollPositionRelative * documentHeight // Yields an "average" pixel position
  ;

查看实际操作：http://jsbin.com/tawana/1/

【讨论】：

Blex 已经在 cmets 中回答了这个问题，我已经修改了他的解决方案，使其变得更好。你的解决方案更糟糕..所以如果它没有提高这个线程中已经存在的答案的质量，我看不出有任何理由发布它

今天教我一些东西。告诉我为什么我的解决方案“更糟糕”。

您正在使用 jQuery，它不需要而且速度很慢。使用 jQuery 毫无意义，但无论如何你都在使用它。这在处理“锤击”CPU 的事件时尤其错误。另外，您正在使用Math 方法，这不是必需的。

需要我告诉你，SO 是一种资源，其中问题和答案可以让人们感兴趣，而不是原始海报？您在评论中收到了答案（对您有好处，甚至更好，因为您改进了@blex 提出的“可怕的代码”）。但是你的问题没有得到正式的回答，我想解释一下（不是很用语言，真的，但我希望这个例子是不言自明的，如果没有优化以适应你的口味）。但我看到你是一个愤怒的人，为每个人布道。

不生气，只是不明白你为什么要发布一些性能几乎是 cmets 建立的性能的一半，而代码却加倍的东西。以后来的任何人都会看到线程上的 4 cmets 并对代码感到满意。低等的答案只会造成混乱。 （运行速度慢很多的更多代码）