javascript - 水平滚动条复制

Question

我有一个带有一些隐藏 td 的表格，它的水平滚动条对应于表格的宽度。加载时表格的宽度没有滚动，因为我们单击展开按钮，隐藏的 td 被打开，表格的宽度大于查看空间，因此滚动条按预期填充。

现在，我有一个与上面提到的表格等效的滚动条；但是当点击展开按钮时滚动条没有得到更新；它与加载时间相同。

我们可以使用任何技术将 table/div 元素滚动条的相同行为复制到虚拟滚动条中吗？

提前致谢！！！

Answer 1

这是我用来创建双滚动条的方法 - 意味着将滚动条附加到元素的顶部，因为底部默认只有一个：

function appendFakeScroll(elementToAttachScrollTo) {

    var newElementId = elementToAttachScrollTo[0].id + "Fake";

    // Check if we already have a fake scroll
    if (!$("#" + newElementId)[0]) {

        // No fake scroll exist, let's create a container for the scroll. It has to be the same width as the element we just expanded.
        var html = '<div style="overflow:auto;width:' + elementToAttachScrollTo.width() + 'px;height:17px;" id="' + newElementId + '">';
            html += '<div style="width:' + elementToAttachScrollTo[0].scrollWidth + 'px; height: 17px;"></div>';
            html += '</div>';

        // Here we attach the created scrollbar to the top of the element with .before()
        elementToAttachScrollTo.before(html);
    }

    // Create a jquery objekt of the now created fake scrollbar
    var fakeScroll = $("#" + newElementId);

    // Send the element we have the scrollbars in, as well as the fake scrollbar, 
    // to a function that links them together, so that scrolling the fake one
    // also scroll the window and the real scrollbar, and wise versa
    linkScrollWindows(elementToAttachScrollTo, fakeScroll);

}

function linkScrollWindows(elementToAttachScrollTo, fakeScroll) {

    fakeScroll.scroll(function () {
        elementToAttachScrollTo.scrollLeft(fakeScroll.scrollLeft());
    });

    elementToAttachScrollTo.scroll(function () {
        fakeScroll.scrollLeft(elementToAttachScrollTo.scrollLeft());
    });
}