Metro style & winJS: is there a way to know if an element is outside the screen?

Question

In a horizontal listView - is it possible to know whether a certain fragment is "outside" the screen?

Answer 1

Because WinJS is essentially running in IE 10, you can approach this as you would a regular web issue. Some of this is borrowed from Check if element is visible after scrolling

Using JQuery, you can do:

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) );
}

You can also do it in pure "WinJS" (Internet Explorer 10 + JavaScript), it would look something like:

function isScrolledIntoView(elem)
{
    var docViewTop = window.pageXOffset;
    var docViewBottom = docViewTop + window.innerHeight;

    var elemTop = =  document.getElementById(elem).offsetTop
    var elemBottom = elemTop + =  document.getElementById(elem).offsetHeight

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
      && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}