蚂蚁Antd的fix table是如何做到表头和表身无延迟同步滚动的

发布于 2022-09-12 01:26:37 字数 1249 浏览 23 评论 0

  • 问题描述:
    公司用的是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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文