Question

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

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

表格图示例

enter image description here

这三个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>

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

Answer 1

仅供参考，我现在设法解决了这个问题。

我使用javascript编辑左侧属性，每个table / div的位置都是固定的或绝对的。

为了滚动我使用这个插件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的原因是因为我有时会发现它有时会达到-2，这会使我桌子上的某些内容模糊不清。

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

仅使用一个滚动条在X轴上移动三个表

1 个答案: