我已经上传了Gif图片,这样很容易观察到问题。
这是桌子的回购 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
});
}
};