Question

我有一张包含动态内容的表格。

当它加载时，我希望某一行（它与哪一行不同）位于顶部。如果表格在我想要滚动到视图的行之下有足够的行，则这是可行的。

但是当我想要例如顶部的第12行并且表只有14行时。它不会向下滚动得太远，因为没有任何东西可以填满剩余的空间。

我猜我需要一些东西来填补左边空间。但是如果表格处于已经填充其容器的滚动位置，那么应缩小到0。我可以得到一个元素来填补这个空间。但是当用户向上滚动时，它应该减小高度（当桌面内容向下移动时）并且之后不会增长。这意味着用户只需向上滚动一次。

有人问：“你自己试着写点什么吗？”

好吧，我想出了这个。它几乎适用于页面加载，然后当您从那里导航到另一个锚点时，间隔符会变得太大。由于某些原因比第一页加载大得多。

Scrollreference是表格滚动的元素。

var createSpacer = function (row, height) {
    // add element with height equal to distance
    spacer = document.createElement('div');
    var container = getClosestBySelector(row, tableContainerSelector);
    container.appendChild(spacer);
    spacer.className = spacerClass;
    spacer.style.height = height + 'px';
    return spacer;
};

var getInitialSpacerHeight = function (row) {
    var scrollreference = getClosestBySelector(row, scrollReferenceSelector);
    // get scrollreference that has this row
    // return distance from top of table
    var sizeAboveRow = row.getBoundingClientRect().top - scrollreference.getBoundingClientRect().top - window.scrollY;
    return sizeAboveRow;
};

var navigationHandler = function (e) {
    // set anchored row to top even if table doesn't have enough rows to put it there
    var rowID = e.detail.newLocation.substring(e.detail.newLocation.indexOf("#") + 1);
    // only if the new location has an anchor
    if (rowID !== "") {
        var row = document.querySelector('#' + rowID);
        var spacerHeight = getInitialSpacerHeight(row);
        if (spacerHeight === 0) {
            // if spacer height = 0 we don't need to act
            // remove listener and/or spacer here?
            return;
        } else {
            createSpacer(row, spacerHeight);
            var scrollreference = getClosestBySelector(row, scrollReferenceSelector);
            scrollreference.scrollTop = scrollreference.scrollHeight;
        }
    }
}

将表格行滚动到视图（和顶部），即使它是最后一行

0 个答案: