Reactjs处理程序，以改变table's滚动条位置

I'm构建具有垂直和水平滚动条的某个ReactJs表，像the following JSFiddle Reactjs处理程序，以改变table's滚动条位置

我需要模仿ReactJS javascript代码如下：

document.getElementById("tbody").addEventListener("scroll", myFunction); 
function myFunction() { 

var elmnt = document.getElementById("tbody"); 
var elmnt2 = document.getElementById("thead"); 

elmnt2.scrollLeft = elmnt.scrollLeft; 

}

然后我想：

handleScroll = (event) => { 

    let tbody = this.refs.mainTable.getElementsByTagName('tbody'); 
    let thead = this.refs.mainTable.getElementsByTagName('thead'); 

    thead.scrollLeft = tbody.scrollLeft; 
    } 

    render() { 

    return (
     <div onScroll={this.handleScroll} 
      <table ref='mainTable'> 
      ... table content... 
      </table> 
     </div> 
     ); 
    }

这不是移动滚动条符合市场预期。

如何使用ReactJS将tbody滚动条移动到滚动处理程序上thead滚动条的相同位置？

来源

2017-09-29 Mendes

这是因为Y滚动条，它比thead导致更多的溢出。您必须减小宽度以匹配tbody的 –

@A.Lau，请您详细说明一下可读代码吗？韩国社交协会。 – Mendes

https://jsfiddle.net/dk1x5rvs/1/

的TBODY的scrollWidth结束了，因为这会占用一些零售空间

滚动条的比THEAD大就包括：

var actualInnerWidth = document.getElementById("tbody").clientWidth; 
document.getElementById("thead").style.width = actualInnerWidth + "px";

在你的JavaScript，它应该修复它

来源

2017-09-29 00:48:00

我不知道你是否正确理解我的问题。我需要垂直滚动条始终在屏幕宽度上使用ReactJS的位置。这不起作用。这不是'scrollWidth'问题，而是一个不适用于ReactJs的'scrollLeft'。这是关于转换JavaScript代码工作反应组件... – Mendes

@Mendes如果你似乎无法理解的简单事实，滚动条最终占用的宽度，导致更多的'tbody'溢出比' thead'这就是为什么当滚动时不对齐（即使是一个例子）。那么我认为没有人可以帮助你。由于该解决方案在我的小提琴中可见，因此将其转换为反应是没有问题的。 –

Reactjs处理程序，以改变table's滚动条位置

回答

相关问题