javascript - 仅用一个滚动条在 X 轴上移动三个表格

Question

所以我有三个需要始终对齐的表。但是，它们沿 X 轴滚动，第二个表也沿 Y 轴滚动。所以我将第一个和第三个表设置为 float 在页面上方并且它们正确对齐。但是，我终究无法想出一种方法来在第三个表格的底部设置一个滚动条来滚动所有三个表格。

我已经包含了页面标记的图像。

表格图像示例

三个div都是withing div

<div class="container">
    <div id="Floating-Jumbotron">
        <div class="box"></div>
        <div class="contains-tables">
           <table>...</table>
        </div>           
    </div>
    <table>....</table>
    <div class="jumbo-2">
        <table> .... </table>
    </div>
    <div class="box"></div>
</div>

所以这里只是为了澄清我的问题，就是让三个表格同时滚动，只显示一个滚动条。

Answer 1

仅供引用，我现在已经设法解决了这个问题。

一旦每个表/div 的位置为固定或绝对，我就使用 javascript 编辑左侧属性。

为了获得滚动我使用了这个插件 draggabilly https://draggabilly.desandro.com/在“on”事件上更改 wright 属性。

    //SCROLL BAR
    var scroller = new Draggabilly( '.scrollBar', {
        axis: 'x',
        containment: true
    });
    scroller.on( 'dragMove', function() {
        console.log((Math.abs(this.position.x)));
        var adjustAmo = ((Math.abs(this.position.x) * -1)/3.5);
        console.log(adjustAmo);
        if(adjustAmo >= -190.429) {
            if(adjustAmo >= -1) {
                $("#tableHeader").css('left', "70px");
                $("#datatable").css('left', "70px");
                $("#summary-row").css('left', "70px");
            } else {
                $("#tableHeader").css('left', adjustAmo + "px");    
                $("#datatable").css('left', adjustAmo + "px");  
                $("#summary-row").css('left', adjustAmo + "px");    
            }
        }
    });

那是我最终的 JavaScript 代码。在我看来，数学有点奇怪，但它有效，所以谁在乎。这显然有与我相关的特定行，例如如果 adjustAmo 大于或等于 -1，则将左侧设置为 70px。这是 -1 的原因是因为我发现有时使用 draggabilly 它有时会达到 -2，这会掩盖我 table 上的一些内容。

我确信有更好的方法可以做到这一点，但至少现在对我有用