如何同步多个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

像这样的东西？

    function syncScroll(elements) {

      function getScrollPositions() {

        return elements.map((el) => ({

          scrollLeft: el.scrollLeft,

          scrollTop: el.scrollTop,

        }));

      }

      let scrollPositions = getScrollPositions();

      elements.forEach((el) =>

        el.addEventListener("scroll", () => {

          let currentPositions = getScrollPositions();

          for (let [i, position] of currentPositions.entries()) {

            for (let dim of ["scrollLeft", "scrollTop"]) {

              if (position[dim] != scrollPositions[i][dim]) {

                for (let element of elements) {

                  element[dim] = position[dim];

                }

              }

            }

          }

          scrollPositions = currentPositions;

        })

      );

    }

    syncScroll([T1Obj, T2Obj, T3Obj]);

https://jsfiddle.net/xowvp3a9/

还要记住，滚动的元素不是#T1, #T2, #T3，而是其中的一个 div 。您可以使用滚动标签查看它。

是因为：

  const T1Obj = document.querySelector('#T1 .wtHolder');

  const T2Obj = document.querySelector('#T2 .wtHolder');

  const T3Obj = document.querySelector('#T3 .wtHolder');