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

我试图让一个div相对于元素的滚动百分比设置0%-100%的动画

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

我们可以很容易地设置起始宽度，也可以很容易地检测滚动，我们可以得到触发动画的元素的高度，我只是不能得到它的百分比

如果我能找出如何返回滚动的conheight百分比，那么这应该很容易

$(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 +"%"  );

});

这是一个JSFIDLE

这是基于body元素的滚动百分比设置条形图长度的动画

从0%到100%设置动画（好吧，其实不是，但我不知道为什么）

我想做的是获取.post div的滚动百分比，然后设置与之相关的长条动画。 例如，滚动了.post的10%，条长是宽度的10%，滚动了.post的70%，条长是宽度的70%

您的问题与相同，但垂直

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

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

在您的例子中，

containeR=window；包含=文档

：

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

---

好吧，我明白你想要达到的目标了……事实上，我只是做了一些非常相似的事情。我发现的大多数解决方案也只适用于具有窗口或文档属性的整版示例。相反，我需要在一个特定的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;
});

你可以在这里找到小提琴：

我实施此项目的当前项目位于以下位置：

---

我希望这能解决您的问题：）

假设您希望跟踪在页面的某个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+"%");
}

---

可能的重复也不完全清楚你想要完成什么。。。。不起作用的代码并不能代替对您所需内容的详细解释，而一个实时html演示始终有帮助。我将添加一个JSFIDLE，但仍然令人困惑，因为演示中没有包含

class=post

@andy的元素。我已经清理了您的代码，删除了未使用的变量和与您的问题无关的代码，从JSFIDLE添加代码。这太棒了，比我的代码更适合整个页面的滚动百分比，但是如何获得.post的滚动百分比呢？因为.post不一定是页面的高度。我希望条形长度的宽度与百分比相关（百分比）。post已滚动。@andy您的小提琴没有任何

.post

元素。只需使用

var scrollPercent=100*$（容器）.scrollTop（）/（$（包含）.height（）-$（容器）.height（））

替换

容器

和

包含的

elementsOk，这里是一个用.post元素更新的fiddle。请看。帖子的高度是可变的，可能会在页面的一半处结束。我在这里真的很迷路。不确定包含什么，呃。@andy在您的JSFIDLE中没有任何带有

class=“post”

的元素！！100*$（“.list”）.scrollTop（）/$（“.list”）[0]。scrollHeight