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

Question

我试图让一个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，http://jsfiddle.net/SnJXQ/

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

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

我想做的是得到. postdiv的滚动百分比，然后动画长条相对于它。滚动10%的. post，. bar-long是10%的宽度，滚动70%的. post，. bar-long是70%的宽度。

Answer 1

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

Answer 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小提琴为Div滚动百分比

我实现此功能的当前项目位于此处：垂直滚动驱动水平位置

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

Answer 3

演示

您的问题与如何在JavaScript中获取HTML元素的水平滚动百分比相同？，但是垂直的。

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

/*  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());