jquery-mobile - JQM - 項目が画面に表示されているかどうかを検出する方法

Question

私は JQuery モバイルを使用しています。リストビューがスクロールされ、特定の項目が画面に表示されたときにイベントを発生させたいと考えています。

こんなイベントあるの!? 私のオプションは何ですか?!

ありがとう。

Answer 1

私の知る限り、jQM にはこれを行うためのイベントはありませんが、StackOverflow の他のソリューションからのアイデアを組み合わせてこれを行うことができます。

この質問は、アイテムが表示されているかどうかを判断するためのコードを提供します。

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>次のように定義されたアイテムを監視しているとします。

 <li id="myiditem">
      <a href="bmw.html">I'm being watched!!</a>
 </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 の例を次に示します。