仅用一个滚动条在 X 轴上移动三个表格答案

【问题标题】：Moving three tables on the X axis with only one scroll bar仅用一个滚动条在 X 轴上移动三个表格
【发布时间】：2017-11-03 23:37:52
【问题描述】：

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

我已包含页面标记外观的图像。

表格图片示例

这三个 div 都与 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>

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

【问题讨论】：

啊，@MinalChauhan 不知道你能做到这一点。 :)

标签： javascript jquery html css css-tables

【解决方案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，这会掩盖我桌子上的一些内容。

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

【讨论】：