JQuery Kochbuch (German Edition)

p:last').position();
    var scrollPosition = $foo.scrollTop() + lastParagraphPosition.top;
    jQuery('#foo').animate({scrollTop: scrollPosition}, 300);
});
    ----
    Note
    jQuery besitzt auch eine Methode
scrollLeft
,die sich analog zu
scrollTop
verhält.
    ----

Ermitteln, ob sich ein Element im sichtbaren Bereich befindet
    Problem
    Sie wollen herausfinden, ob sich ein Element im sichtbaren Bereich befindet. Zudem möchten Sie wissen, wie groß der sichtbare Anteil des Elements ist und dann zu ihm scrollen, wenn dieser geringer als 50% ist.
    Lösung
    Hier werden mehrere der bisher behandelten Lösungen kombiniert.
    Es sind mehrere Schritte notwendig:
    Die Größe des sichtbaren Bereichs (des »Viewports«) bestimmen.
Die Scroll-Position des Elements bestimmen.
Die minimalen und maximalen Werte für die obere und linke Position des Elements ermitteln, wenn es sichtbar ist.
Die Position des Elements mit diesen Werten vergleichen.
jQuery(document).ready(function() {
    var viewportWidth = jQuery(window).width(),
     viewportHeight = jQuery(window).height(),

     documentScrollTop = jQuery(document).scrollTop(),
     documentScrollLeft = jQuery(document).scrollLeft(),

     minTop = documentScrollTop,
     maxTop = documentScrollTop + viewportHeight,
     minLeft = documentScrollLeft,
     maxLeft = documentScrollLeft + viewportWidth,

     $myElement = jQuery('#myElement'),
     elementOffset = $myElement.offset();
    if (
     (elementOffset.top > minTop && elementOffset.top < maxTop) &&
     (elementOffset.left > minLeft &&elementOffset.left < maxLeft)
    ) {
     alert('Element ist sichtbar');
    } else {
     alert('Element ist nicht sichtbar');
    }
});
    Mit dieser Lösung wissen wir, ob sich das obere Ende des Elements im sichtbaren Bereich befindet. Eine bessere Lösung wäre, zu prüfen, ob sich das gesamte Element im sichtbaren Bereich befindet:
jQuery(document).ready(function() {
    var viewportWidth = jQuery(window).width(),
     viewportHeight = jQuery(window).height(),
     documentScrollTop = jQuery(document).scrollTop(),
     documentScrollLeft = jQuery(document).scrollLeft(),

     $myElement = jQuery('#myElement'),

     elementOffset = $myElement.offset(),
     elementHeight = $myElement.height(),
     elementWidth = $myElement.width(),

     minTop = documentScrollTop,
     maxTop = documentScrollTop + viewportHeight,
     minLeft = documentScrollLeft,
     maxLeft = documentScrollLeft + viewportWidth;

    if (
     (elementOffset.top > minTop && elementOffset.top + elementHeight < maxTop) &&
     (elementOffset.left > minLeft && elementOffset.left + elementWidth < maxLeft)
    ) {
     alert('Element ist vollständig sichtbar');
    } else {
     alert('Element ist nicht vollständig sichtbar');
    }
});
    Alternativ können wir auch prüfen, wie viel vom Element sichtbar ist – liegt der Anteil unter einem bestimmten Grenzwert, können wir dorthin scrollen:
jQuery(document).ready(function() {

var viewportWidth = jQuery(window).width(),
    viewportHeight = jQuery(window).height(),

    documentScrollTop = jQuery(document).scrollTop(),
    documentScrollLeft = jQuery(document).scrollLeft(),

    $myElement = jQuery('#myElement'),

    verticalVisible, horizontalVisible,

    elementOffset = $myElement.offset(),
    elementHeight = $myElement.height(),
    elementWidth = $myElement.width(),

    minTop = documentScrollTop,
    maxTop = documentScrollTop + viewportHeight,
    minLeft = documentScrollLeft,
    maxLeft = documentScrollLeft + viewportWidth;

function scrollToPosition(position) {
    jQuery('html,body').animate({
     scrollTop : position.top,
     scrollLeft : position.left
    }, 300);
}

if (
    ((elementOffset.top > minTop && elementOffset.top < maxTop) ||
    (elementOffset.top + elementHeight > minTop && elementOffset.top +
     elementHeight < maxTop))
&&
    ((elementOffset.left > minLeft && elementOffset.left < maxLeft) ||
    (elementOffset.left + elementWidth > minLeft && elementOffset.left +
     elementWidth < maxLeft))
) {
    alert('Element ist (teilweise) sichtbar');

    if (elementOffset.top >= minTop && elementOffset.top + elementHeight
<= maxTop) {
     verticalVisible = elementHeight;
    } else if (elementOffset.top < minTop) {
     verticalVisible = elementHeight - (minTop - elementOffset.top);
    } else {
     verticalVisible = maxTop - elementOffset.top;
    }

    if (elementOffset.left >= minLeft && elementOffset.left + elementWidth
<= maxLeft) {
     horizontalVisible = elementWidth;
    } else if (elementOffset.left < minLeft) {
     horizontalVisible = elementWidth - (minLeft - elementOffset.left);
    } else {
     horizontalVisible = maxLeft -