由於滾動發送的條目查看內容不再顯示

我在頁面頂部有一個javascript幻燈片放映。當幻燈片切換到下一張圖像時，我會調用另一個函數來更改頁面的背景顏色。由於滾動發送的條目查看內容不再顯示

當幻燈片不再顯示時，即用戶向下滾動頁面時，客戶端希望背景顏色停止更改。

有什麼方法可以檢測元素是否因滾動而不再可見？

2011-06-08 demoncodemonkey

可能的重複[如何檢查一個元素是否真的可以用javascript。]（http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible -shell） – 2011-06-08 05:33:53

@ Box9：這個問題需要三個信息，其中滾動是一個，但兩年後沒有任何真正的滾動回答，這個問題（不像這個）說他們使用Prototype。所以我會說這應該是獨立的。 – 2011-06-08 05:43:10

您可以使用jQuery $.scrollTop函數，可能從scroll事件處理函數來編寫腳本。

來源

2011-06-08 05:50:27

現在接受這個答案，因爲它非常簡單... – demoncodemonkey 2011-07-05 08:42:26

使用window.pageYOffset確定窗口中的滾動量。使用對象的當前偏移量來檢查它是否在視圖中。請注意，這些值主要取決於瀏覽器，因此首先檢查它是否存在，然後對其執行操作。 jQuery中

來源

2011-06-08 05:38:30

測試代碼

function test() { 
    var $elem = $('.test'); 
    var visibleAtTop = $elem.offset().top + $elem.height() >= $(window).scrollTop(); 
    var visibleAtBottom = $elem.offset().top <= $(window).scrollTop() + $(window).height(); 
    if (visibleAtTop && visibleAtBottom) { 
     alert('visible'); 
    } else { 
     alert('invisible (at ' + (visibleAtTop ? 'bottom' : 'top') + ')'); 
    } 
}

完全在http://jsfiddle.net/9PaQc/1/工作示例（更新：http://jsfiddle.net/9PaQc/2/）

附：這隻會檢查垂直滾動。對於水平，只是做與top同樣與left取代，Y - >X和height() - >width()

編輯

使這一切的方式jQuery的（保證X-瀏覽器的兼容性）通過改變window.scrollY - >$(window).scrollTop()

來源

2011-06-08 05:49:24 mkilmanas

太棒了。完美的答案和例子，它的作品非常漂亮。謝謝:) – demoncodemonkey 2011-06-08 09:46:53

由於滾動發送的條目查看內容不再顯示

回答

相關問題