用jQuery获得元素滚动的百分比

我试图让一个div相对于元素滚动的百分比来动画0％ - 100％。用jQuery获得元素滚动的百分比

现在我已经设置了一些变量，但我无法用百分比来计算一个变量的高度。

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

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

$(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/

这是动画条长的基础上滚动主体元素的百分比。

动画从0％ - 100％（嗯，它并不真的，但我不明白为什么）。

我想要做的是获得.post div的卷动百分比，然后相对于此动画长条形。即。滚动10％的.post，.bar-long是10％的宽度，滚动70％的.post，.bar-long是70％的宽度。

来源

2013-10-27 andy

可能重复[？如何让JavaScript的HTML元素的滚动百分比（http://stackoverflow.com/questions/ 12222389 /如何获得滚动百分比的HTML元素在JavaScript） – Oriol

也不完全清楚你到底想要完成....代码不工作不是一个替代对于你需要的确切解释和一个实时HTML演示总是有帮助 – charlietfl

挂上我会添加一个jsfiddle – andy

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

来源

2013-10-27 03:14:08 Oriol

这真是太棒了，对于整个页面的滚动百分比比我的代码更好，但是如何获得.post的滚动百分比？由于.post不一定是页面的高度。我希望bar-long的宽度是百分比关系（百分比明智）.post已滚动。 – andy

@andy你的小提琴没有任何'.post'元素。只需使用'var scrollPercent = 100 * $（containeR）.scrollTop（）/（$（containeD）.height（） - $（containeR）.height（））;'替换containeR'和'containeD'元素 – Oriol

好吧，这是一个带有.post元素的更新小提琴。请参阅.post是可变高度，并可能在页面的一半处完成。 http://jsfiddle.net/SnJXQ/4/我真的很迷茫。不知道容器会是什么，呃。 – andy

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

首先，你会想滚动事件连接到您的$（”后‘）

接下来，$高度（’。内容'）将会等于你的实际滚动身高

最后，应用您的百分比计算公式：（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

我希望这可以解决您的问题:)

来源

2013-11-27 22:07:47 Xanfar

假设您想跟踪页面中某些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+"%"); 
}

的

来源

2017-06-02 12:17:39

用jQuery获得元素滚动的百分比

回答

相关问题