javascript - 使用单个滚动条滚动 2 个 div 的内容

Question

我有一个有 3 行的 div。我的代码在 Bootstrap 中。我想将水平滚动条放在第一行下方和其余两行上方，即第一行和第二行之间。当我滚动时，所有 3 行的内容应该同时滚动。我怎样才能做到这一点？这是我到目前为止尝试过的

<div id="main-content">
    <div class="row sample_data">
        <div class="row sample_content">
            <div class="col-sm-4 graph_data_heading">Year</div>
            <div class="col-sm-3 time1">Jan'16</div>
            <div class="col-sm-3 time2">Feb'16</div>
            <div class="col-sm-3 time3">Mar'16</div>
            <div class="col-sm-3 time4">Apr'16</div>
        </div>
        <div class="row sample_content">
            <div class="col-sm-4 graph_data_heading">revenue</div>
            <div class="col-sm-3">230</div>
            <div class="col-sm-3">287.5</div>
            <div class="col-sm-3">359.375</div>
            <div class="col-sm-3">449.21875</div>
        </div>
        <div class="row sample_content">
            <div class="col-sm-4 graph_data_heading">Gross Margin</div>
            <div class="col-sm-3">230</div>
            <div class="col-sm-3">287.5</div>
            <div class="col-sm-3">359.375</div>
            <div class="col-sm-3">449.21875</div>
        </div>
    </div>
</div>

CSS:

    #main-content > .row > .row:first-child {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    #main-content > .row > .row {
        overflow: hidden;
        white-space: nowrap;
    }
#main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:none;
    display:inline-block;
    white-space:normal;
    vertical-align:top;
}

请帮帮我。谢谢。

Answer 1

使用 jQuery 的 scrollLeft() 改变第二和第三个 div 的滚动位置。

示例代码。

$('#top').scroll(function () {
    $('#bottom').scrollLeft($(this).scrollLeft());
});

工作 fiddle