问题引入

部分场景需要用到两个文本输入框联动滚动的情况，如下：

scroll.gif

关键属性

scrollTop 可读可写的dom属性，标识元素滚动距离顶部的距离。

实现思路

1.将两个需要同步滚动的元素分别绑定上onScroll，监听event变化,以及用于获取dom的id

<TextArea
  id='rightScroll'
  onScroll={(e)=>handleScroll(e, 'leftScroll')}
/>
<TextArea
  id='leftScroll'
  onScroll={(e)=>handleScroll(e, 'rightScroll')}
/>

2.handleScroll方法中，获取到scrollTop并将另一个textarea的scrollTop也修改
注意：如果仅仅这样做，会触发重复执行，因为rightScroll的scrollTop更改后，修改leftScroll时，也会触发leftScroll的onScroll。需要判断相邻两次滚动的值是否相等，不相等再触发修改。

  handleScroll = (e, goal) => {
    const { scrollTop } = e.target;
    const { inputScroll, scrollLock } = this.state;
      const doc = document.getElementById(goal);
      if (doc && inputScroll !== scrollTop) {
        doc.scrollTop = scrollTop;
        this.setState({
          inputScroll: scrollTop,
        });
      }
  };

3.针对textarea的滚动，当左右元素的实际高度不同时，会导致其中一个已经滚到底了，另一个还能继续滚动的情况。可以考虑获取两个textarea的行数差，用换行符填充\n较短的那一个。