使用 jquery 获取元素的滚动百分比答案

【问题标题】：get percentage scrolled of an element with jquery使用 jquery 获取元素的滚动百分比
【发布时间】：2026-02-03 20:15:01
【问题描述】：

我正在尝试让 div 以相对于元素滚动百分比的 0% - 100% 设置动画。

现在我已经设置了一些变量，但是我在尝试按百分比计算一个变量的高度时遇到了麻烦。

我们可以很容易地设置起始宽度，也可以很容易地检测滚动，因为我们可以得到将触发动画的元素的高度，我只是无法以百分比的形式得到它。

如果我能弄清楚如何返回滚动的高度百分比，那么这应该很容易。

$(window).scroll(function() {

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = ($(window).scrollTop() / $(document).height()) * 100;

    $('.bar-long').css('width', scrollPercent +"%"  );

});

这是一个 jsfiddle，http://jsfiddle.net/SnJXQ/

这是基于 body 元素滚动百分比的动画条。

从 0% 到 100% 的动画（嗯，它不是真的，但我不知道为什么）。

我想要做的是获取 .post div 的滚动百分比，然后相对于它设置动画条。 IE。滚动 10% 的 .post，.bar-long 是 10% 宽度，滚动 70% 的 .post，.bar-long 是 70% 宽度。

【问题讨论】：

How to get scrolling percentage of an HTML element in JavaScript?的可能重复
也不完全清楚你想要完成什么......不工作的代码不能代替对你需要的确切解释的可靠解释，并且实时 html 演示总是有帮助跨度>
等一下，我会添加一个 jsfiddle
仍然令人困惑，因为演示没有class=post的元素
@andy 我已经清理了你的代码，删除了与你的问题无关的未使用的变量和代码，并从你的 jsfiddle 添加了代码。

标签： javascript jquery

【解决方案1】：

Demo

你的问题和How to get horizontal scrolling percentage of an HTML element in JavaScript?一样，但是是垂直的。

然后，要获得垂直滚动的百分比，请使用

/*  JS  */ var scrollPercentage = 100 * containeR.scrollTop / (containeR.scrollHeight-containeR.clientHeight); 
/*jQuery*/ var scrollPercent = 100 * $(containeR).scrollTop() / ($(containeD).height() - $(containeR).height());

在你的情况下，containeR = window; containeD = document:

var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());

【讨论】：

这太棒了，并且比我的代码更适用于整个页面的滚动百分比，但是我如何获得 .post 的滚动百分比？因为 .post 不一定是页面的高度。我希望 bar-long 的宽度与 .post 已滚动的百分比相关（百分比）。
@andy 你的小提琴没有任何.post 元素。只需使用 var scrollPercent = 100 * $(containeR).scrollTop() / ($(containeD).height() - $(containeR).height()); 替换 containeR 和 containeD 元素
好的，这是一个带有 .post 元素的更新小提琴。请参阅 .post 是可变高度，并且可能在页面的中途结束。 jsfiddle.net/SnJXQ/4我真的很迷失在这里。不知道 containsD 会是什么，呃。
@andy 在你的 jsfiddle 中没有任何带有 class="post" 的元素！！
100 * $(".list").scrollTop() / $(".list")[0].scrollHeight

【解决方案2】：

好的，我明白你想要达到的目标......事实上，我只是做了一些非常相似的事情。我在那里发现的大多数解决方案也仅适用于具有窗口或文档属性的整页示例。相反，我需要在一个特定的 div 中使用它，在我的情况下，它实际上用于更新另一个 div 的水平位置。

首先，您需要将滚动事件附加到 $('.post')

接下来，$('.content') 的高度将等于您的实际滚动高度

最后，应用您的百分比公式：(Y / (scrollHeight - postHeight)) * 100 = scrollPercent

因此，您的代码应如下所示，而不是使用文档或窗口属性：

$('.post').scroll(function() {
  var currY = $(this).scrollTop();
  var postHeight = $(this).height();
  var scrollHeight = $('.content').height();
  var scrollPercent = (currY / (scrollHeight - postHeight)) * 100;
});

你可以在这里找到小提琴：JS Fiddle For Div Scroll Percentage

我实施的当前项目位于此处：Vertical Scroll Drives Horizontal Position

我希望这能解决你的问题:)

【讨论】：

【解决方案3】：

假设您想要跟踪页面中某个 IFrame 中找到的某个文档的滚动。

object.addEventListener("scroll", documentEventListener, false);

那么你的事件监听器应该是这样的：

function documentEventListener(){
  var currentDocument  = this;
  var docsWindow       = $(currentDocument.defaultView); // This is the window holding the document
  var docsWindowHeight = docsWindow.height(); // The viewport of the wrapper window
  var scrollTop        = $(currentDocument).scrollTop(); // How much we scrolled already, in the viewport
  var docHeight        = $(currentDocument).height();    // This is the full document height.

  var howMuchMoreWeCanScrollDown = docHeight - (docsWindowHeight + scrollTop);
  var percentViewed = 100.0 * (1 - howMuchMoreWeCanScrollDown / docHeight);
  console.log("More to scroll: "+howMuchMoreWeCanScrollDown+"pixels. Percent Viewed: "+percentViewed+"%");
}

【讨论】：