Question

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

我已阅读here（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;
        }
    }
}

我没有收到任何错误。它只是对over divs做了什么。当我为sl和this.scrollLeft运行console.log时，我会在滚动时获得像素。但它并没有为其他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

Answer 2

这是一个相当简单的实现：

<style>
    .container { width: 300px; height: 400px; overflow-y: scroll; float: left; margin: 20px; }
</style>

<div class="container">
    <table>
        <!-- table rows here -->
    </table>
</div>
<div class="container">
    <table>
        <!-- table rows here -->
    </table>
</div>
<div class="container">
    <table>
        <!-- table rows here -->
    </table>
</div>

<script>
    (function(){
        var boxes = document.querySelectorAll('.container');
        for(var boxIndex = 0, bl = boxes.length; boxIndex < bl; boxIndex++) {

            boxes[boxIndex].onscroll = function(){
                for(var boxIndex2 = 0, bl2 = boxes.length; boxIndex2 < bl2; boxIndex2++) {
                    if(boxes[boxIndex2] !== boxes[boxIndex]) {
                        boxes[boxIndex2].scrollTop = this.scrollTop;
                    }
                }
            };
        }
    })();
</script>

当滚动容器元素时，它会更新剩余元素的scrollTop值。

Answer 3

好的，您已经选择了答案，但是您的问题中有一些元素未得到解决。我喜欢将卷轴绑定到所有框的想法，包括一个水平框。我已经创建了这个jQuery插件，它允许你将滚动框绑定在一起，甚至可以绑定跨平面滚动。您可以查看here

现在，它是一个非常大的插件，但我会解释它的作用。

说你有三个div

<div class="scroll">
    Vertical
    Vertical
    vertical
    Vertical
    Vertical
    vertical

</div>

<div class="scroll">
    Vertical
    Vertical
    vertical
    Vertical
    Vertical
    vertical
    Vertical
    Vertical
    vertical
</div>

<div class="scroll" data-horizontal="true"> horizontal horizontal horizontal horizontal </div>

其中两个是垂直的（和不同的高度），最后一个是垂直的。

要将这些绑定在一起，您只需实现jQuery扩展，如下所示：

$(".scroll").bindScroll();

插件不仅可以绑定滚动，还可以调整以适应不同的高度。因此，如果您滚动到一个div的底部（或最右侧），尽管大小不同，它将会转到其他div的底部或最右侧。

如果您对插件有任何疑问，请与我们联系。

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

3 个答案: