ScrollTop не так, как ожидалось

Примечание

Возобновление щедрости, как забыл присудить ей в прошлый раз. Уже ответил Мастер А.Вофф.

Я хочу достичь определенной строки, когда пользователь ее расширяет (так что, когда расширяется последняя видимая строка, пользователю не нужно прокручивать вниз, чтобы увидеть содержимое).

Я использовал

$('#example tbody').on('click', 'td .green-expand', function (event, delegated) {    

        var tr = $(this).closest('tr');
        var row = table.row(tr);


        if (row.child.isShown()) {
            if (event.originalEvent || (delegated && !$(delegated).hasClass('show'))) {
                row.child.hide();
                tr.removeClass('shown');
            }
        } else {
            if (event.originalEvent || (delegated && $(delegated).hasClass('show'))) {
                row.child(format(row.data())).show();
                tr.addClass('shown');

                var parent = $(this).closest('table');
                var scrollTo = $(this).closest('tr').position().top;

                $('.dataTables_scrollBody').animate({
                    scrollTop: scrollTo
                });
            }
        }
});

Примечание

Развернуть строку - просто нажмите на ссылку click. Он покажет подробности строки

Datatable с расширением строки

Ответы

Ответ 1

Вместо этого вы должны использовать свойство offsetTop, чтобы получить соответствующий offsetParent (см. раздел edit):

var scrollTo = tr.prop('offsetTop');

-jsFiddle -

Или установите позицию table не статическую:

table.dataTable { position: relative; }

-jsFiddle -

EDIT: Почему jq position().top не работает в этом случае?

Это потому, что позиция вычисляется относительно offsetParent. В зависимости от spec, offsetParent является ближайшим предком с вычисленным положением не статическим или элементом body или td, th или table (spec).

Такое поведение, я подозреваю, может возвращать разные результаты в отношении реализации браузера, следуя спецификации или нет.

Итак, jQuery нормализует его, не используя собственное свойство DOM offsetParent, а собственный метод $.fn.offsetParent(). Эта реализация метода такова:

offsetParent: function () {
    return this.map(function () {
        var offsetParent = this.offsetParent || docElem;

        while (offsetParent && (!jQuery.nodeName(offsetParent, "html") && jQuery.css(offsetParent, "position") === "static")) {
            offsetParent = offsetParent.offsetParent;
        }
        return offsetParent || docElem;
    });
}

Как вы можете видеть, исключение элемента не выполняется в отношении любого типа элемента (docElem - текущий объект документа). По умолчанию позиция элемента table статична, поэтому в вашем примере jq возвращается как offsetParent, обертка div, используемая плагином jQuery datatable, а не table (исключение после спецификации). Итак, native offsetTop свойство и jq $.fn.position().top возвращает другой результат.

Также решение в настоящий момент не работает во всех случаях

Тестирование на хром (только), я не могу реплицировать проблему.

Ответ 2

Вам нужно будет взять высоту экрана и настроить расширенный div в соответствии с вашим размером требуемого пикселя. Мы не можем напрямую использовать параметр scrollTop, чтобы отрегулировать положение в окне. Они должны динамически корректироваться, поскольку они зависят от различных разрешений и размеров экрана. Посмотрите, есть ли у вас больше проблем.

Спасибо!!