用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獲得元素滾動的百分比

回答

相關問題