Question

我有一张带有隐藏td的桌子，其中水平滚动条对应于桌子的宽度。在加载时，当我们点击展开按钮时，表的宽度没有滚动，隐藏的td被打开，并且表的宽度超过了查看空间，因此滚动条按预期填充。

现在，我有一个相当于表格的滚动条，如上面的mentioend;但在移动时单击“展开”按钮时，滚动条不会更新;它与负载时间保持一致。

我们可以使用任何技术将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());
    });
}

水平滚动条复制

1 个答案: