场景Header、Footer都有Table设置了scrollX才关注同频滚动

监听onScroll方法获取到滚动条向左的滚动的距离scrollLeft同时给三个dom设置scrollLeft

监听onScroll获取scrollLeft设置header、footer、tableBody的scrollLeft

const

给所有的header、footer、table-body设置scrollLef***ader.scrollLeft

scrollLeft

setScrollTarget(compareTarget);//一个

滚动需要

header、body、summary、stickyScrollBar所有同步滚动//

header设置scrollLeftscrollHeaderRef.current

mergedScrollLeft//

设置scrollLeftscrollBodyRef.current

mergedScrollLeft}};对比两个的实现可以看到rc-table里的实现多了一个入参scrollLeft和一个if判断

用组件FixedHolder实现给FixedHolder绑定ref监听的是onWheel,

React.useEffect(()

React.WheelEventHTMLDivElement;//

避免触发不必要滚动

});e.preventDefault();}}fixHolder.current?.addEventListener(wheel,

onWheel);return

{fixHolder.current?.removeEventListener(wheel,

onWheel);};},

{}),}}ref{setScrollRef}className{classNames(className,

{[stickyClassName]:

!!stickyClassName,})}/tablestyle{{tableLayout:

fixed,visibility:

(ColGroupcolWidths{mergedColumnWidth

1}columns{flattenColumnsWithScrollbar}/)}{children({...props,stickyOffsets:

columnsWithScrollbar,flattenColumns:

flattenColumnsWithScrollbar,})}/table/div通过ref,调用useCallback赋值dom;利用scrollRef.current监听wheel事件转成onScroll增加入参scrollLeft;

const

给Tables设置scrollX的情况下TableBody设置样式{overflow-x:

auto}这样会有同频滚动

divstyle{...scrollXStyle,...scrollYStyle}onScroll{onScroll}ref{scrollBodyRef}TableComponent{bodyColGroup}{bodyTable}/TableComponent/div获得当前正在执行的dom

const

useTimeoutLock(null);getScrollTarget用来获得当前正在执行的dom

当组件重新渲染dom更新此时正在执行的dom,在下一个render的时候就变了useRef在下一次渲染之前不重新赋值还是保留和上一次一样的值

源码里使用useRef

setTimeout实现useRef是用来存放当前正在执行的dom;setTimeout用来节流

其中getState获取正在执行当前state可能是空的setState设置当前的State,并且在100ms以后清空设置的状态

export

useTimeoutLockState(defaultState?:

State):

{window.clearTimeout(timeoutRef.current);}function

setState(newState:

清空上一次的定时器cleanUp();timeoutRef.current

window.setTimeout(()

getScrollTarget()调用onScroll的之前是否有滚动的dom;

没有就更新有判断是否和触发onScroll是相同Dom;是更新目的是为了避免执行上一个onScroll的时候下一个onScroll执行陷入循环就相当于节流了hooks版本的节流

const

{setScrollTarget(compareTarget);

}看这块逻辑的时候优化细节从hooks的角度实现节流wheel和scroll都是滚动但是也有区别并且在react里支持dom绑定onScroll、onWheel

rc-table如何固定左右两侧

场景table的columns里设置fixed属性的时候会出现滚动fixed:true

left固定左侧fixed:

更新每个column的sticky的偏移距离更新涉及到fixed相关属性fixedLeft、fixedRight、lastFixLeft、firstFixRight、lastFixRight、firstFixLeft、isSticky

相关链接

https://github.com/react-component/table

antd-table:

https://ant.design/components/table-cn#components-table-demo-fixed-columns