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超链接即可。它将显示行详细信息

Datatable with expand row

Answer 1

您应该使用offsetTop属性来获取相关offsetParent（参见编辑部分）：

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

-jsFiddle-

或者将table元素位置设置为非静态：

table.dataTable { position: relative; }

-jsFiddle-

编辑： 为什么jq position().top在这种情况下不起作用？

这是因为计算了offsetParent的位置。本地，关于规范，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，jQuery datatable插件使用的div包装器而不是table（异常）遵循规范）。因此，原生offsetTop属性和jq $.fn.position().top会返回不同的结果。

目前的解决方案在所有情况下都不起作用

在chrome上测试它（仅限），我无法复制问题。

Answer 2

您需要获取屏幕高度并根据所需的像素大小调整扩展的div。我们不能直接使用scrollTop选项来调整窗口中的位置。这些必须动态调整，因为它取决于各种屏幕分辨率和大小。看看你是否有更多问题。

谢谢！

scrollTop并不像预期的那样

注意

2 个答案:

-jsFiddle-

-jsFiddle-