修复了使用鼠标滚轮或触控板滚动时列摆动的问题

时间:2018-12-11 17:40:49

标签: javascript excel reactjs react-virtualized

我已经上传了Gif图片,这样很容易观察到问题。

With MouseWheel / Touchpad

With Scrollbar

这是桌子的回购 https://github.com/pratishshr/react-sheet

下面是修复列的主要代码。

Hagrid.js

  fixable = scroller => {
    if (this.props.fixable) {
      let dataTable = document.querySelector('.data-table'),
        row = document.querySelectorAll('.table-row');

      row.forEach((element, index) => {
        for (let i = 0; i < this.props.fixable.col; i++) {
          element.childNodes[i].style.transform = `translate3d(${scroller}px, 0, 0)`;
          if (scroller > 0) {
            element.childNodes[i].style.zIndex = `999`;
            element.childNodes[i].style.background = `white`;
            element.childNodes[i].style.boxShadow = `1px 0px 3px 0px rgba(0, 0, 0, 0.14)`;
          } else {
            element.childNodes[i].style.boxShadow = null;
          }
        }
      });
    }
  };

  scrollInteract = event => {
    let scrollLeft = event.target.scrollLeft;
    if (event.target.classList.contains('data-table')) {
      // Calls fixable when scroll starts
      this.fixable(scrollLeft);

      this.setState({
        scrollOffsetLeft: scrollLeft
      });
    }
  };

0 个答案:

没有答案