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

get percentage scrolled of an element with jquery

提问by andy

I'm trying to get an div to animate 0% - 100% relative to the percentage scrolled of an element.

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

Now I've set up a few variables, but I'm having trouble trying to calculate the height of one by percentage.

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

We can set the starting width quite easily and detect the scroll easily enough too, as can we get the height of the element that'll trigger the animation, I just can't get it as a percentage.

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

If I can figure out how to return the percent of conheight scrolled then this should be easy.

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

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

});

Here's a jsfiddle, http://jsfiddle.net/SnJXQ/

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

This is animating bar-long based on the percent scrolled of the body element.

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

Animates from 0% - 100% (well, it doesn't really, but I can't figure out why).

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

What I'd like to do is get scroll percent of the .post div, then animate bar-long relative to that. ie. Scrolled 10% of .post, .bar-long is 10% width, scrolled 70% of .post, .bar-long is 70% width.

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

回答by Oriol

Demo

演示

Your problem is the same as How to get horizontal scrolling percentage of an HTML element in JavaScript?, but vertically.

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

Then, to get the vertically scrolled percentage, use

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

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

In your case, containeR = window; containeD = document:

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

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

回答by Xanfar

Ok I see what you are trying to achieve....in fact I just did something very similar. Most solutions I found out there also were only for full page examples with window or document properties. Instead I needed this in a specific div which in my case was actually used to update the horizontal position of another div.

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

First, you are going to want the scroll event attached to your $('.post')

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

Next, the height of the $('.content') is going to equal your actual Scroll Height

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

Lastly, apply your percentage formula : (Y / (scrollHeight - postHeight)) * 100 = scrollPercent

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

So instead of using document or window attributes your code should be as follows:

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

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

You can find the fiddle here: JS Fiddle For Div Scroll Percentage

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

The current project where I have implemented this is located here: Vertical Scroll Drives Horizontal Position

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

I hope this solves your problem :)

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

回答by Nadav B

Let's say you want to keep track of the scroll of some document found in some IFrame in your page.

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

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

Then your event listener should look like this:

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

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