Taşan bir Div içindeki bir öğeye nasıl geçebilirim?

Bir div içinde sadece bir seferde 5 gösterebilen 20 liste öğem var. 10 numaralı öğeye ve sonra 20 numaralı öğeye kaydırmanın iyi bir yolu nedir? Tüm eşyaların yüksekliğini biliyorum.

scrollToEklenti yapar, ama onun kaynağı gerçekten içine almadan anlamak süper kolay değildir. Bu eklentiyi kullanmak istemiyorum.

Diyelim ki 2 elemanları alır bir işlevi var diyelim $parentDiv, $innerListItemne $innerListItem.offset().topde $innerListItem.positon().topbana $ parentDiv için doğru scrollTop verir.

$innerListItem.position().topAslında görecelidir .scrollTop()ilk konumlandırılmış atasının. Dolayısıyla, doğru $parentDiv.scrollTop()değeri hesaplamanın yolu $parentDiv, konumlandırıldığından emin olarak başlamaktır . Zaten açık bir ifadesi yoksa positionkullanın position: relative. Elemanların $innerListItemve tüm atalarının $parentDivaçık bir konuma sahip olmaları gerekmiyor. Şimdi ile şuraya gidebilirsiniz $innerListItem:

// Scroll to the top
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top);

// Scroll to the center
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top
    - $parentDiv.height()/2 + $innerListItem.height()/2);

Bu benim eklentim (öğeyi listenin en üstüne yerleştirecek. Özellikle için overflow-y : auto. İle çalışmayabilir overflow-x!):

NOT : elemsayfanın kaydırılacağı bir öğenin HTML seçicisidir. : Gibi jQuery tarafından desteklenen herhangi bir şey #myid, div.myclass, $(jquery object), [dom nesne], vs.

jQuery.fn.scrollTo = function(elem, speed) { 
    $(this).animate({
        scrollTop:  $(this).scrollTop() - $(this).offset().top + $(elem).offset().top 
    }, speed == undefined ? 1000 : speed); 
    return this; 
};

Animasyona ihtiyacınız yoksa, şunu kullanın:

jQuery.fn.scrollTo = function(elem) { 
    $(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top); 
    return this; 
};

Nasıl kullanılır:

$("#overflow_div").scrollTo("#innerItem");
$("#overflow_div").scrollTo("#innerItem", 2000); //custom animation speed 

Not: #innerItemiçeride herhangi bir yerde olabilir #overflow_div. Gerçekten doğrudan bir çocuk olmak zorunda değil.

Firefox (23) ve Chrome (28) 'de test edilmiştir.

Tüm sayfayı kaydırmak istiyorsanız, bu soruyu kontrol edin .

Glenn Moss'un cevabını, taşma divının sayfanın üstünde olmayabilir.

parentDiv.scrollTop(parentDiv.scrollTop() + (innerListItem.position().top - parentDiv.position().top) - (parentDiv.height()/2) + (innerListItem.height()/2)  )

Ben duyarlı bir şablon ile bir google haritalar uygulamasında kullanıyordum. 800 pikselden büyük çözünürlükte liste haritanın sol tarafındaydı. <800 çözünürlüğünde liste haritanın altındaydı.

Yukarıdaki cevaplar, taşma elemanının içinde görünse bile, iç elemanı taşma elemanının üstüne yerleştirecektir. Öğe görünmüyorsa kaydırma konumunu değiştirmeyecek şekilde değiştirdim.

jQuery.fn.scrollTo = function(elem, speed) {
    var $this = jQuery(this);
    var $this_top = $this.offset().top;
    var $this_bottom = $this_top + $this.height();
    var $elem = jQuery(elem);
    var $elem_top = $elem.offset().top;
    var $elem_bottom = $elem_top + $elem.height();

    if ($elem_top > $this_top && $elem_bottom < $this_bottom) {
        // in view so don't do anything
        return;
    }
    var new_scroll_top;
    if ($elem_top < $this_top) {
        new_scroll_top = {scrollTop: $this.scrollTop() - $this_top + $elem_top};
    } else {
        new_scroll_top = {scrollTop: $elem_bottom - $this_bottom + $this.scrollTop()};
    }
    $this.animate(new_scroll_top, speed === undefined ? 100 : speed);
    return this;
};

Hayatımı kolaylaştırmak için şu 2 işlevi yazıyorum:

function scrollToTop(elem, parent, speed) {
    var scrollOffset = parent.scrollTop() + elem.offset().top;
    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

function scrollToCenter(elem, parent, speed) {
    var elOffset = elem.offset().top;
    var elHeight = elem.height();
    var parentViewTop = parent.offset().top;
    var parentHeight = parent.innerHeight();
    var offset;

    if (elHeight >= parentHeight) {
        offset = elOffset;
    } else {
        margin = (parentHeight - elHeight)/2;
        offset = elOffset - margin;
    }

    var scrollOffset = parent.scrollTop() + offset - parentViewTop;

    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

Ve onları kullanın:

scrollToTop($innerListItem, $parentDiv, 200);
// or
scrollToCenter($innerListItem, $parentDiv, 200);

Onunla çok uzun bir süre oynadıktan sonra, ben bu kadar geldim:

    jQuery.fn.scrollTo = function (elem) {
        var b = $(elem);
        this.scrollTop(b.position().top + b.height() - this.height());
    };

ve buna böyle diyorum

$("#basketListGridHolder").scrollTo('tr[data-uid="' + basketID + '"]');