JQM - 如何检测项目是否显示在屏幕上

Question

我正在使用JQuery mobile，我想在滚动列表视图并在屏幕上显示特定项目时引发一个事件。

这是否有事件？！我有什么选择？！

感谢。

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>项目

 <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示例。