Question

我在jquery中有以下解决方案，用于数据表的2个水平滚动条。

$(function () {
    $('.wrapper1').on('scroll', function (e) {
        $('.wrapper2').scrollLeft($('.wrapper1').scrollLeft());
    }); 
    $('.wrapper2').on('scroll', function (e) {
        $('.wrapper1').scrollLeft($('.wrapper2').scrollLeft());
    });
});
$(window).on('load', function (e) {
    $('.div1').width($('table').width());
    $('.div2').width($('table').width());
});

http://jsfiddle.net/67xSL/71/

你会如何在Reactjs中写这个？

Answer 1

在componentDidMount中，您可以这样：

document.getElementsByClassName('wrapper2')[0].addEventListener('scroll', () => {
  document.getElementsByClassName('wrapper1')[0].scrollLeft = 
  document.getElementsByClassName('wrapper2')[0].scrollLeft;
})

document.getElementsByClassName('wrapper1')[0].addEventListener('scroll', () => {
  document.getElementsByClassName('wrapper2')[0].scrollLeft = 
  document.getElementsByClassName('wrapper1')[0].scrollLeft;
})

希望它对您有帮助：）

如何使用reactjs创建2个水平滚动条

1 个答案: