Shiny中DT datatable配置FixedHeader与ScrollY时滚动回弹问题
问题原因
核心触发原因是配置项大小写书写错误。
DT包封装的DataTables组件对配置项大小写严格敏感,原生DataTables的Y轴滚动配置项为小驼峰格式的scrollY,你代码中写的是大写S开头的ScrollY,组件无法识别该参数,不会生成指定高度的表格内部滚动容器。此时FixedHeader插件无法获取正确的滚动容器边界、滚动偏移计算逻辑完全失准,会错误监听页面级滚动事件而非表格内滚动,滚动时位置计算偏差累积到阈值就会强制把表格回弹到顶部。
额外的冗余配置也会增加异常概率:你当前数据量仅20~50行,完全不需要Scroller虚拟滚动扩展,之前调试时开启Scroller反而会和FixedHeader的位置监听逻辑冲突。
修复方案
- 修正滚动配置项的大小写,把
ScrollY = "200px"改为scrollY = "200px",这一步即可解决绝大多数回弹问题。 - 移除不必要的冗余配置:删掉注释掉的Scroller相关代码、删掉和
paging = FALSE逻辑重复的pageLength = -1配置,减少不必要的逻辑冲突。 - 如果Shiny页面顶部有固定导航栏,可给FixedHeader补充偏移量配置,避免高度计算错误,格式为
fixedHeader = list(headerOffset = 导航栏像素高度)。
修正后的可直接运行的配置代码如下:
DT::datatable(data, caption = htmltools::tags$caption(style = 'caption-side: top; text-align: center; color:orange; font-size:200% ;','Order Acceptance Requests'), rownames = FALSE, extensions = "FixedHeader", options = list( paging = FALSE, searching = FALSE, columnDefs = ColSorting, autoWidth = TRUE, ordering = TRUE, info = FALSE, fixedHeader = TRUE, scrollY = "200px" ))
补充:如果改完仍有偶发偏移,可给表格外层套一个明确高度的div容器,FixedHeader对明确父级高度的表格适配更稳定。
内容的提问来源于stack exchange,提问作者Bob Janson
相关产品推荐
相关产品推荐

