JQM - 如何檢測項目是否顯示在屏幕上

Question

我正在使用JQuery移動，並且我想在列表視圖滾動並且屏幕上顯示特定項目時引發一個事件。

有沒有這個事件？我有什麼選擇？

謝謝。

Answer 1

AFAIK在jQM中沒有這樣做的事件，但是您可以結合StackOverflow上的其他解決方案的想法來完成此操作。

This question提供了一些代碼，以確定是否一個項目是可見的，即：

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) 
     && (elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

您可以用scrollstop事件結合這一點。假設你正在監視定義爲

<li id="myiditem"> 
     <a href="bmw.html">I'm being watched!!</a> 
</li> 

一個<li>項目，然後在$(document).ready你可以做

var watchitem; 
$(document).ready(function(){ 
    watchitem = document.getElementById ('myiditem'); 
    /* Bind to scroll event */ 
    $(window).bind('scrollstop', function() { 
     if (isScrolledIntoView(watchitem)) { 
      alert('monitored li item was scrolled into view'); 
     } 
    }); 
}); 

這裏是一個jsFiddle例子。