蚂蚁Antd的fix table是如何做到表头和表身无延迟同步滚动的
- 问题描述:
公司用的是Material Ui,觉得蚂蚁表格的固定表头固定列很好,便阅读源码仿写,在表身滚动时,立即给表头节点设置scrollLeft属性,但是由于onScroll触发频率极高,表头滚动相对落后表身一点点,视觉效果较差,请问蚂蚁是如何做到表头和表身几乎无延迟同步滚动的 - 蚂蚁的代码
function forceScroll(scrollLeft, target) {
/* eslint-disable no-param-reassign */scrollLeft)
if (target && target.scrollLeft !== scrollLeft) {
target.scrollLeft = scrollLeft;
}
/* eslint-enable */
}
var onScroll = function onScroll(_ref2) {
var currentTarget = _ref2.currentTarget,
scrollLeft = _ref2.scrollLeft;
var mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
var compareTarget = currentTarget || EMPTY_SCROLL_TARGET;
debugger
if (!getScrollTarget() || getScrollTarget() === compareTarget) {
setScrollTarget(compareTarget);
forceScroll(mergedScrollLeft, scrollHeaderRef.current);
forceScroll(mergedScrollLeft, scrollBodyRef.current);
}
if (currentTarget) {
var scrollWidth = currentTarget.scrollWidth,
clientWidth = currentTarget.clientWidth;
setPingedLeft(mergedScrollLeft > 0);
setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
}
};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论