如何知道滾動條何時到達jquery中瀏覽器的中心？

如何知道瀏覽器何時到達瀏覽器的中心？當滾動條到達瀏覽器的中心時，我需要加載內容，而不是到達瀏覽器的末端。如何知道滾動條何時到達jquery中瀏覽器的中心？

2011-11-19 Anish

例1 - 當頁面的中間達到

利用jQuery的.scroll()法事件時滾動窗口觸發事件加載內容。

從那裏您可以簡單地使用.scrollTop()獲取瀏覽器中與頁面頂部相關的當前位置，並使用.height()獲取窗口的最大高度併除以2得到中心點。

一旦.scrollTop()是通過中心點，你已經找到中間。

$(window).scroll(function() { 
    if ($(window).scrollTop() > $(window).height()/2) 
    { 
     // middle of page hit, load extra content here 
     alert('You are in the middle of the page'); 

     // Uncomment out the line below to unbind the scroll event if the 
     // execution of this code is only desired once. 
     // $(this).unbind('scroll'); 
    } 
});

Fiddle Demo

實施例2 - 當識別元件滾動到視圖中（這是更類似於Facebook的是如何工作的，它們具有有頁上的「加載更多」元素加載內容當它滾動到視圖中意味着你到達內容的結尾並加載更多內容

你可以使用的另一種方法是利用這個功能

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
}

通過Scott Dowding在這個答案Check if element is visible after scrolling

哪些可以用來檢測當一個元素是可視面積在瀏覽器內可見。使用這種方法，您可以在頁面的底部/中間放置一個元素，並再次使用.scroll()在滾動上觸發事件。

當這個元素進入視圖時，激發你的代碼加載更多的內容或任何你想做的事情。

$(window).scroll(function() { 
    if (isScrolledIntoView($('#loadmorecontent'))) 
    { 
     // element has been scrolled into view, load extra contents here 
     alert('element scrolled into view'); 

     // Uncomment out the line below to unbind the scroll event if the 
     // execution of this code is only desired once. 
     // $(this).unbind('scroll'); 
    } 
}); 

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
}

Fiddle Demo

來源

2011-11-19 16:49:05

謝謝。第一個例子適用於我。 – Anish

沒問題，不要忘記完成整個週期以解決您的問題;如果此答案解決了您的問題，請通過選中此答案旁邊的框將問題標記爲已回答。這有助於建立自己的聲譽，讓他人知道什麼解決了您的問題，這隻會使您和社區受益。 –

首先，你需要的頁面的總高度，這是通過了解<body>元素的高度來完成。接下來，您必須知道何時已到達頁面的中心，bodyTotalHeight/2最後使用window object上的scroll事件來檢測用戶何時在頁面上進行滾動。滾動條的當前位置由功能scrollTop給出。

這裏有代碼：

var windowElem = $(window); 
var mediumHeight = $('body').height()/2; 

windowElem.bind('scroll', function(e) { 
    if(windowElem.scrollTop() >= mediumHeight) { 
     console.log('loading new content...'); 
     windowElem.unbind('scroll'); 
    } 
});

來源

2011-11-19 17:04:08

如果需要用戶到達頁面的底部之前加載的內容，就可以計算出該文件的隱藏底高度在客戶端的屏幕上，然後如果該文件的底部高度是在一個設定的範圍內，你可以像下面的例子（使用jQuery）來啓動你的腳本：

$(window).scroll(function() { 
    //calculating the client's hidden bottom height of the document 
    var BottomHeight = $(document).height() - $(window).height() - $(window).scrollTop(); 
    //set the min value of the document's hidden bottom height 
    var minBHeight = 50; 

    if (BottomHeight < minBHeight) { 
     alert('Time to load, user is within scroll range!'); 
     } 
});

來源

2012-09-03 13:10:17

如何知道滾動條何時到達jquery中瀏覽器的中心？

回答

相關問題