如何绑定多个元素一起滚动？

Question

我有 3 个不同的表水平滚动（一个垂直滚动）。我如何将它们绑定在一起，所以如果我在一个上水平滚动，它们都会滚动？

我已经通读了这里（Mozilla 文档），但我无法让它工作。

看起来它应该相当简单。

<div class="page-wrapper relative">
<div class="table-wrapper-outter">
    <div class="table-wrapper">
        <div class="header header-wrapper">
            <div class="header-inner">
                <table id="headerTable" class="table-contents">
                    <tr>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> etc... </td>
                    </tr>

                </table>
            </div>
        </div>
        <div id="bodyHolder" class="table-content-outter">
            <div class="table-content-inner">
                <table id="mainTable" class="table-contents">
                        <tr>
                            <td> 1234567890 </td>
                            <td> 1234567890 </td>
                            <td> 1234567890 </td>
                            <td> 1234567890 </td>
                            <td> 1234567890 </td>
                            <td> 1234567890 </td>
                            <td> 1234567890 </td>
                            <td> 1234567890 </td>
                            <td> 1234567890 </td>
                            <td> etc... </td>
                        </tr>
                        <!-- many rows -->

                </table>
            </div>
        </div>
        <div class="header footer-wrapper">
            <div class="header-inner">
                <table id="footerTable" class="table-contents">
                    <tr>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> 1234567890 </td>
                        <td> etc... </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

这是我尝试过的javascript：

function megaTableInit(tableBodyHolder, mainTable, headerTable, footerTable, tablePullDivs, tableRowHeads) {
var bodyHolder = document.getElementById(tableBodyHolder);
var mTable = document.getElementById(mainTable);
var hTable = document.getElementById(headerTable);
var fTable = document.getElementById(footerTable);
var pullDivs = document.getElementsByClassName(tablePullDivs);
var rowHeads = document.getElementsByClassName(tableRowHeads);

bodyHolder.onmousemove = bodyHolder.onscroll = function() {

    pullDivs[0].scrollLeft = this.scrollLeft;

    var sl = this.scrollLeft;

    if(this.oldSL != sl) {
        this.oldSL = sl;

        for (i=0; i<pullDivs.length; i++) {
            pullDivs[i].scrollLeft = this.scrollLeft;
        }
    }
}

我没有收到任何错误。它只是对过度的 div 没有任何作用。当我运行 console.log forsl并this.scrollLeft在滚动时得到像素。但它不会为其他 div 设置滚动。

任何帮助，将不胜感激。

Answer 1

我不确定这是否正是您想要的，但它会执行您所描述的操作，当您滚动 1 时它会滚动所有其他内容。

$('.scroller').scroll(function(e){
  $('.scroller').scrollLeft(e.target.scrollLeft);
});

http://codepen.io/anon/pen/QbaKNz

编辑：这是使用 vanilla JavaScript 的相同示例：

var scrollers = document.getElementsByClassName('scroller');

var scrollerDivs = Array.prototype.filter.call(scrollers, function(testElement) {
  return testElement.nodeName === 'DIV';
});

function scrollAll(scrollLeft) {
  scrollerDivs.forEach(function(element, index, array) {
    element.scrollLeft = scrollLeft;
  });
}

scrollerDivs.forEach(function(element, index, array) {
  element.addEventListener('scroll', function(e) {
    scrollAll(e.target.scrollLeft);
  });
});

http://codepen.io/anon/pen/zGpNrm