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

Question

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

这个有活动吗？！我有什么选择？！

谢谢。

Answer 1

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