Question

If course it seems scrollIntoViewIfNeeded is a feature tendered only by WebKit. However I’m working on something that needs to be compatible with IE back to 7, and I need to detect whether something is visible, and if not, then call scrollIntoView() on it.

It’s also important to note that I’m not dealing with whole windows, I could be dealing with a smaller DIV in which an element may be scrolled out of the viewable box.

For example, the element with id “pleaseFindMe” should be scrolled into view only if overflowed out of the viewable area of the div.

    <div style='border:1px solid black;width:40%; overflow:scroll;'>
        <span id='e2' style='white-space: nowrap;' >Lorem ipsum aliqua proident veniam et quis consectetur esse dolore non Ut nulla dolor eu culpa. Lorem ipsum sint cupidatat non et adipisicing esse elit officia. proident, sunt in culpa qui officia deserunt mollit anim <span id='pleaseFindMe'>id est</span> laborum. </span>
    </div>  

Answer 1

IE has supported the beautiful element method getBoundingClientRect since IE4. Although it has some minor flaws in IE<8, it can definitely be used for your purpose.

So here’s the trick:

var findMe = document.getElementById("pleaseFindMe"),
    contRect = container.getBoundingClientRect(),
    findMeRect = findMe.getBoundingClientRect();
if (findMeRect.top < contRect.top || findMeRect.bottom > contRect.bottom
       || findMeRect.right > contRect.right || findMeRect.left < contRect.left)
    findMe.scrollIntoView();