Question

我有一个包含两个div的页面 - 一个包含一个表并且不是固定高度，另一个包含多个表，并且是基于第一个div的固定高度（具有自动溢出-y）。

HTML：

<div id="tables-container" style="height: 100vh;">
    <div id="outstanding-table">
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
                ...more rows...
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr>

    <div id="overview-tables" style="overflow-y: auto;">
        <h3 id="table-1">Table 1</h3>
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
                ...more rows...
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
            </tbody>
        </table>

        <h3 id="table-2">Table 2</h3>
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
                ...more rows...
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
            </tbody>
        </table>

        <h3 id="table-3">Table 3</h3>
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
                ...more rows...
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
            </tbody>
        </table>
        ...more tables...
    </div>
</div>

JS：

$(document).ready(function () {
    var overviewTablesHeight = $('#tables-container').innerHeight() - $('#outstanding-table').innerHeight() - 50;
    $('#overview-tables').innerHeight(overviewTablesHeight);

    var timeoutTime = 1000;
    var tableId = getFirstTableId();

    scrollDown();

    function getFirstTableId() {
        var id = 'table-1';
        return id;
    }

    function getNextTableId() {
        var tableIdParts = tableId.split('-');
        var id = tableIdParts[0] + '-' + (parseInt(tableIdParts[1]) + 1);
        return id;
    }

    function scrollDown() {
        setTimeout(function () {
            tableId = getNextTableId();

            var scrollTo = $('#' + tableId).position().top - $('#overview-tables').offset().top;
            console.log($('#' + tableId).offset().top + ' - ' + $('#overview-tables').offset().top + ' = ' + scrollTo);
            scroll(scrollTo);

            var isBottom = $('#overview-tables').scrollTop() + $('#overview-tables').innerHeight() >= $('#overview-tables')[0].scrollHeight;
            if (isBottom) {
                scrollUp();
            }
            else {
                scrollDown();
            }
        }, timeoutTime);
    }

    function scrollUp() {
        setTimeout(function () {
            scroll(0);
            tableId = getFirstTableId();
            scrollDown();
        }, timeoutTime);
    }

    function scroll(scrollTopValue) {
        $('#overview-tables').animate({ scrollTop: scrollTopValue }, 'fast');
    }
});

我试图让底部自动向下滚动到每个h3（使用this answer中的想法）直到它到达底部，此时它会滚动回到顶部，然后重新开始。但是，offset().top似乎没有给出正确的值。例如，第三个表的偏移值低于第二个表，导致它向上滚动一点，而不是向下滚动。

这是显示问题的Bootply。我已经添加了控制台日志，因此您可以看到正在计算的值。

我已经看过这些问题，但似乎所有人都在谈论检查边距，图像，填充等，但在我的Bootply上面我没有边距，加上不正确的值似乎没有每次出去都是相同的数额：

Answer 1

我刚发现this answer几乎修复了我的滚动问题，但是我必须添加一些额外的东西才能在我的情况下正常工作。这是我更新的scrollDown函数：

function scrollDown() {
    setTimeout(function () {
        tableId = getNextTableId();

        var scrollTo = $('#' + tableId).position().top + $('#overview-tables').scrollTop() - $('#outstanding-table').innerHeight();
        scroll(scrollTo);

        var isBottom = $('#overview-tables').scrollTop() + $('#overview-tables').innerHeight() >= $('#overview-tables')[0].scrollHeight;
        if (isBottom) {
            scrollUp();
        }
        else {
            scrollDown();
        }
    }, timeoutTime);
}

使用offset（）。滚动滚动到错误的地方

1 个答案: