如何知道瀏覽器何時到達瀏覽器的中心?當滾動條到達瀏覽器的中心時,我需要加載內容,而不是到達瀏覽器的末端。如何知道滾動條何時到達jquery中瀏覽器的中心?
4
A
回答
3
例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');
}
});
實施例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));
}
0
首先,你需要的頁面的總高度,這是通過了解<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');
}
});
2
如果需要用戶到達頁面的底部之前加載的內容,就可以計算出該文件的隱藏底高度在客戶端的屏幕上,然後如果該文件的底部高度是在一個設定的範圍內,你可以像下面的例子(使用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!');
}
});
相關問題
- 1. 如何知道滾動條是否出現在瀏覽器(jQuery)中?
- 2. 如何確定瀏覽器中的滾動條何時出現
- 3. Chrome瀏覽器中的滾動條顯示當沒有任何滾動條時
- 4. 假冒瀏覽器中的滾動條
- 5. 如何在移動瀏覽器中顯示Verticla滾動條
- 6. 瀏覽器滾動條
- 7. 如何補償瀏覽器中的滾動條?
- 8. 如何暫時禁用移動Safari瀏覽器中的滾動?
- 9. 如何將瀏覽器的滾動條移動到一個類中?
- 10. 如何在瀏覽器中始終顯示垂直滾動條?
- 11. 瀏覽器如何知道scss文件?
- 12. 滾動瀏覽器中的滾動條,而不使用window.scrollBy
- 13. jQuery - 使用瀏覽器滾動條控制divs滾動
- 14. 添加了緩動的瀏覽器滾動條 - 如何?
- 15. 如何自動隱藏Windows瀏覽器上的滾動條
- 16. 查看不帶滾動條的瀏覽器中的長圖像的中心
- 17. 如何知道UITableView在iPhone中滾動到底的時間
- 18. 如何知道瀏覽器何時關閉?
- 19. 瀏覽器滾動條移動
- 20. IE瀏覽器滾動條的寬度?
- 21. div的跨瀏覽器滾動條
- 22. 如何消失瀏覽器的滾動條
- 23. 我如何可以使用標準的瀏覽器滾動條
- 24. 知道用戶何時瀏覽網頁
- 25. 如何滾動瀏覽器窗口
- 26. 如何使用jQuery查找瀏覽器窗口的中心
- 27. 如何設置瀏覽器滾動條來滾動頁面的一部分?
- 28. 如何知道瀏覽器在JavaScript中最小
- 29. 隱藏Firefox瀏覽器滾動條
- 30. 隱藏瀏覽器滾動條
謝謝。第一個例子適用於我。 – Anish
沒問題,不要忘記完成整個週期以解決您的問題;如果此答案解決了您的問題,請通過選中此答案旁邊的框將問題標記爲已回答。這有助於建立自己的聲譽,讓他人知道什麼解決了您的問題,這隻會使您和社區受益。 –