水平滚动条复制

Horizontal Scrollbar replication

本文关键字：复制 滚动条 水平      更新时间：2023-09-26

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

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

我们有什么技术可以将表/div 元素滚动条的相同行为复制到虚拟滚动条中吗？

提前谢谢!!

这是我用来创建双滚动的内容 - 意思是将滚动附加到元素的顶部，因为默认情况下底部只有一个：

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());
    });
}
相关文章：