如何同步多个handsontable水平滚动

Question

我的 React 视图中有 3 个实践表。当用户水平和垂直滚动时，我需要它们同步。我尝试使用 javascript 在没有任何运气的情况下进行水平工作。

import React from 'react';

import ReactDOM from 'react-dom';

const handsontableData = Handsontable.helper.createSpreadsheetData(6, 50);

const Table1 = () => (

  <div>

    <Handsontable.react.HotTable

      id="T1"

      data={handsontableData}

      colHeaders

      rowHeaders

      colWidths={[100]}

      height={200}

      width="100vw"

    />

  </div>

);

const Table2 = () => (

  <div>

    <Handsontable.react.HotTable

      id="T2"

      data={handsontableData}

      colHeaders

      rowHeaders

      colWidths={[100]}

      height={200}

      width="100vw"

    />

  </div>

);

const Table3 = () => (

  <div>

    <Handsontable.react.HotTable

      id="T3"

      data={handsontableData}

      colHeaders

      rowHeaders

      colWidths={[100]}

      height={200}

      width="100vw"

    />

  </div>

);

const App = () => {

  const T1Obj = document.getElementById('T1');

  const T2Obj = document.getElementById('T2');

  const T3Obj = document.getElementById('T3');

  function getScroll(event) {

    let elem;

    if (event.type === 'scroll') {

      elem = (event.srcElement) ? event.srcElement : event.target;

      if (elem.id === 'T1') {

        T2Obj.scrollLeft = elem.scrollLeft;

        T3Obj.scrollLeft = elem.scrollLeft;

      } else if (elem.id === 'T2') {

        T1Obj.scrollLeft = elem.scrollLeft;

        T3Obj.scrollLeft = elem.scrollLeft;

      } else if (elem.id === 'T3') {

        T1Obj.scrollLeft = elem.scrollLeft;

        T2Obj.scrollLeft = elem.scrollLeft;

      }

    }

  }

  if (typeof addEventListener !== 'undefined') {

    T1Obj && T1Obj.addEventListener('scroll', getScroll);

    T2Obj && T2Obj.addEventListener('scroll', getScroll);

  } else {

    T1Obj && T1Obj.attachEvent('onscroll', getScroll);

    T2Obj && T2Obj.attachEvent('onscroll', getScroll);

  }

  return (

    <div>

      <Table1 />

      <br />

      <Table2 />

      <br />

      <Table3 />

      <br />

    </div>

  );

};

我无法让它在 StackOverflow 代码编辑器中运行。所以这里是 jsfiddle 

Answer 1

像这样的东西？&nbsp; &nbsp; function syncScroll(elements) {&nbsp; &nbsp; &nbsp; function getScrollPositions() {&nbsp; &nbsp; &nbsp; &nbsp; return elements.map((el) => ({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollLeft: el.scrollLeft,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollTop: el.scrollTop,&nbsp; &nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; let scrollPositions = getScrollPositions();&nbsp; &nbsp; &nbsp; elements.forEach((el) =>&nbsp; &nbsp; &nbsp; &nbsp; el.addEventListener("scroll", () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let currentPositions = getScrollPositions();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let [i, position] of currentPositions.entries()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let dim of ["scrollLeft", "scrollTop"]) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (position[dim] != scrollPositions[i][dim]) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let element of elements) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element[dim] = position[dim];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollPositions = currentPositions;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; &nbsp; syncScroll([T1Obj, T2Obj, T3Obj]);https://jsfiddle.net/xowvp3a9/还要记住，滚动的元素不是#T1, #T2, #T3，而是其中的一个 div 。您可以使用滚动标签查看它。是因为：&nbsp; const T1Obj = document.querySelector('#T1 .wtHolder');&nbsp; const T2Obj = document.querySelector('#T2 .wtHolder');&nbsp; const T3Obj = document.querySelector('#T3 .wtHolder');