Làm cách nào để cuộn đến một phần tử trong Div bị tràn?

Question

Tôi có 20 mục danh sách bên trong một div chỉ có thể hiển thị 5 tại một thời điểm. Một cách hay để cuộn đến mụC# 10 và sau đó là mục số 20 là gì? Tôi biết chiều cao của tất cả các vật phẩm.

Plugin scrollTo làm điều này, nhưng nguồn của nó không phải là siêu dễ hiểu mà không thực sự đi vào nó. Tôi không muốn sử dụng plugin này.

Hãy nói rằng tôi có một hàm mang theo 2 yếu tố $parentDiv, $innerListItem, không $innerListItem.offset().top cũng không $innerListItem.positon().top mang lại cho tôi những scrollTop đúng với $ parentDiv.

Answer 1

$innerListItem.position().top thực sự liên quan đến số .scrollTop() của tổ tiên vị trí đầu tiên của nó. Vì vậy, cách tính giá trị $parentDiv.scrollTop() chính xác là bắt đầu bằng cách đảm bảo rằng $parentDiv được định vị. Nếu nó chưa có rõ ràng position, hãy sử dụng position: relative. Các yếu tố $innerListItem và tất cả tổ tiên của nó lên đến $parentDiv không cần phải có vị trí rõ ràng. Bây giờ bạn có thể di chuyển đến $innerListItem với:

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

Answer 2

Tôi đã điều chỉnh Glenn Moss' câu trả lời để giải thích cho thực tế là tràn div có thể không phải ở phía trên cùng của trang.

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

Tôi đang sử dụng ứng dụng này trên ứng dụng bản đồ google có mẫu đáp ứng. Trên độ phân giải> 800px, danh sách nằm ở phía bên trái của bản đồ. Ở độ phân giải < 800, danh sách nằm bên dưới bản đồ.

Answer 3

Đây là Plugin của riêng tôi (sẽ xác định vị trí nguyên tố này trong đầu danh sách các đặc biệt cho overflow-y : auto Có thể không làm việc với overflow-x..!):

LƯU Ý: elem là bộ chọn HTML của một nguyên tố mà trang sẽ được cuộn đến. Bất cứ điều gì được hỗ trợ bởi jQuery, như: #myid, div.myclass, $(jquery object), [đối tượng dom], vv

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

Nếu bạn không cần nó để được hoạt hình, sau đó sử dụng:

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

Làm thế nào để sử dụng:

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

Lưu ý: #innerItem có thể ở bất kỳ đâu bên trong #overflow_div. Nó không thực sự phải là một đứa trẻ trực tiếp.

Đã thử nghiệm trong Firefox (23) và Chrome (28).

Nếu bạn muốn cuộn toàn bộ trang, hãy kiểm tra this question.

Answer 4

Sau khi chơi với nó trong một thời gian rất dài, đây là những gì tôi đã đưa ra:

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

và tôi gọi nó là như thế này

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

Answer 5

Những câu trả lời trên sẽ xác định vị trí các yếu tố bên trong ở đầu phần tử tràn ngay cả khi nó ở chế độ xem bên trong phần tử tràn. Tôi không muốn điều đó vì vậy tôi đã sửa đổi nó để không thay đổi vị trí cuộn nếu phần tử ở chế độ xem.

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