scrollTop并不像预期的那样

Question

注意

重新开启赏金,因为忘了上次奖励它.A.Woff大师已经回答了.

我希望在用户展开它时到达某一行(这样当最后一个可见行扩展时,用户不必向下滚动以查看内容).

我用了,

$('#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超链接即可.它将显示行详细信息

具有展开行的数据表

Answer 1

您应该使用offsetTop属性来获得相关性offsetParent(请参阅编辑部分):

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

-jsFiddle-

或者设置table元素位置不是静态的:

table.dataTable { position: relative; }

-jsFiddle-

编辑:为什么jqposition().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返回为jQuery datatable插件使用offsetParent的div包装器而不是table(规范之后的异常).因此,native offsetTop属性和jq $.fn.position().top返回不同的结果.

此外,当前的解决方案并不适用于所有情况

在chrome(仅)上测试它,我无法复制问题.