Shiny中DT表格左侧滚动位置获取异常：scrollPos始终为0

你遇到的问题核心是：DT表格的实际横向滚动容器并非外层的#tbl元素，而是DT渲染后生成的内部子元素.dataTables_scrollBody。直接调用$("#tbl").scrollLeft()会返回0，因为这个外层容器本身并不负责滚动逻辑。

修正方案： #

• 定位正确的滚动容器：#tbl .dataTables_scrollBody
• 调整事件绑定时机，确保表格渲染完成后再绑定事件（避免元素未加载时绑定失败）
• 建议监听scroll事件实现实时获取滚动位置，也可保留click事件按需使用

修改后的完整代码： #

library(shiny)
library(DT)

js_save_scroll <- '$(document).on("shiny:value", function(event) {
  // 仅在目标表格渲染完成后绑定事件
  if(event.target.id === "tbl"){
    console.log("Table rendered");
    var scrollContainer = $("#tbl .dataTables_scrollBody");
    
    // 监听滚动事件，实时获取横向滚动位置
    scrollContainer.on("scroll", function() {
      var scrollPos = $(this).scrollLeft();
      console.log("Scroll position: " + scrollPos);
    });
    
    // 保留点击触发的逻辑（按需选择）
    scrollContainer.on("click", function() {
      var scrollPos = $(this).scrollLeft();
      console.log("Click - Scroll position: " + scrollPos);
    });
  }
});
'

df <- data.frame(matrix(rnorm(1000), nrow = 100, ncol = 50))

shinyApp(
  ui = fluidPage(
    tags$script(js_save_scroll),
    DTOutput('tbl')
  ),
  
  server = function(input, output) {
    output$tbl = renderDT(df, options = list(scrollX = TRUE)) # 显式开启横向滚动，确保生成滚动容器
  }
)

关键细节： #

• 必须在renderDT的options中设置scrollX = TRUE，DT才会生成.dataTables_scrollBody滚动容器
• 使用shiny:value事件替代shiny:connected，能保证在表格完全渲染后再绑定事件，避免元素不存在的问题
• 直接操作.dataTables_scrollBody元素的scrollLeft()，才能得到正确的横向滚动偏移值

内容的提问来源于stack exchange，提问作者hblum