Как обновить scrollHeight после добавления элементов в div?

У меня есть div, содержащий несколько изображений со скрытым переполнением, которое медленно прокручивается вниз. Я хотел бы, когда прокрутка дойдет до конца, клонировать первый элемент и добавить его в конец, чтобы он продолжал прокручиваться.

Все это до сих пор я выполнил, за исключением того, что он не продолжает прокручиваться, потому что свойство scrollHeight по-прежнему имеет исходное значение. Есть ли способ обновить значение scrollHeight div?

Мой скрипт на данный момент:

$(document).ready(function() {
$("#carousel").scrollTop(0);
intervalID = setInterval("scrollCarousel()",50);

carousel = document.getElementById("carousel");
});

function scrollCarousel() {


if ( $("#carousel").scrollTop() > $("#carousel:first").height() ||
        $("#carousel").scrollTop() + carousel.offsetHeight >
        carousel.scrollHeight ) {

    elem = $("#carousel").children(':first-child').clone();
    console.debug(elem);
    elem.appendTo($("#carousel"));
    carousel.scrollHeight += elem.height;
}
else {
    $("#carousel").scrollTop( $("#carousel").scrollTop() + 1 );
}
}

javascript jquery dom
person Zack Michener    schedule 17.07.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ну вот:

http://jsfiddle.net/Paulpro/bPrY7/

У вас было несколько ошибок:

Прежде всего, вы не должны помещать строку в setInterval. Особенно, когда вы просто вызываете функцию. Поскольку строки анализируются eval, они довольно медленные.

Во-вторых, вы хотите удалить элемент сверху, когда вы добавляете его снизу, а затем просто соответствующим образом отрегулируйте положение прокрутки.

Также $("#carousel") намного медленнее, чем $(carousel), когда у вас уже есть элемент DOM.

person Paul    schedule 17.07.2011
comment
Спасибо за советы! К сожалению, когда он достигает нижней части scrollHeight, он начинает перемещать первый дочерний элемент в конец, но, поскольку положение прокрутки остается прежним, он просто продолжает делать это без прокрутки. - person Zack Michener; 17.07.2011
comment
Ах, я просто забыл установить scrollTop на 0 после перемещения изображения. Задача решена! - person Zack Michener; 17.07.2011
comment
@Zack Michener Если вам интересно, я переделал это без jQuery. Оригинал находится здесь: jsfiddle.net/Paulpro/bPrY7/16 Новый, который не здесь не нужен jQuery: jsfiddle.net/Paulpro/bPrY7 - person Paul; 17.07.2011
comment
Строки в setInterval в основном следует избегать из соображений корректности; производительность вторична. Оценка строк — плохая практика, потому что интерпретатор не может выполнять статический анализ кода до тех пор, пока он не достигнет точки выполнения, что лишило его многих преимуществ. - person dionyziz; 08.07.2015

arrow_upward
0
arrow_downward

просто идея, если вы можете статически поместить первого ребенка в конец карусели, вы можете избежать клонирования и, следовательно, проблемы.

Надеюсь это поможет. С уважением.

person neslonso    schedule 17.07.2011
comment
Ну, идея в том, что всякий раз, когда он прокручивается вниз, он прикрепляется к концу, поэтому он прокручивается бесконечно. - person Zack Michener; 17.07.2011