antd Table组件应用sticky属性出现两个横向滚动条和横向滚动条点击后消失问题

问题描述

antd 的Table组件加上sticky之后有个很恶心的bug, 就是横向滚动条有两条，并且点击一下滚动条，有一条滚动条会消失，并且上下滑动横向滚动条不贴底了。

原因分析：

加了sticky属性再滚动的时候，这时候并没有触发浏览器的的resize事件，导致横向滚动条不受控的出现两条和点击消失

---

解决方案：

在包裹Table组件的地方监听onScroll事件，然后重新调用浏览器的resize方法就可以了

const handleScroll = () => {
    const e = new Event('resize');
    window.dispatchEvent(e);
}

当然，这样会有副作用，会导致浏览器频繁调用此方法，影响性能，这时候给handleScroll事件加个防抖就可以了。

onScroll={debounce(handleScroll, 100)}