How to bind multiple elements to scroll together?

debugcn 投稿 Dev

Barrett Kuethen

I have 3 different tables that scroll horizontally (one scrolls vertically). How do I bind them all together so if I scroll horizontally on one, they all scroll?

I've read through here (Mozilla docs) but I can't get it to work.

It seems like it should be fairly simple.

<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>

And here is the javascript I tried:

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;
        }
    }
}

I don't get any errors. It just doesn't do anything with the over divs. When I run console.log for sl and this.scrollLeft I get the pixels as I scroll. But it doesn't set the scroll for the other divs.

Any help would be appreciated.

Ricky Nelson

I'm not sure if this is exactly what you want but it does what you described, it scrolls all the others when you scroll 1.

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

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

EDIT: here is the same example with 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);
  });
});