R Shiny：修改输入控件后阻止页面自动滚动到顶部的方法

我之前也碰到过这个超烦人的问题！Shiny默认的行为确实会在输入控件更新时把页面强制滚回顶部，尤其当表格很长、操作控件在底部的时候，体验特别糟糕。这里有几个靠谱的解决办法，既能保证表格即时更新，又能彻底阻止这种自动滚动的行为：

方法1：用shinyjs保存并恢复滚动位置 #

这个方法简单直观，借助shinyjs包来监听输入变化，先记录当前的滚动位置，等表格更新完成后再把页面滚回去。

首先安装并加载依赖包，然后实现完整逻辑：

library(shiny)
library(shinyjs)
library(DT)
library(dplyr)

ui <- fluidPage(
  useShinyjs(), # 初始化shinyjs功能
  # 自定义JS函数：负责保存和恢复滚动位置
  extendShinyjs(text = "
    shinyjs.saveScroll = function() {
      sessionStorage.setItem('scrollPos', window.scrollY);
    }
    shinyjs.restoreScroll = function() {
      var pos = sessionStorage.getItem('scrollPos');
      if (pos !== null) {
        window.scrollTo(0, parseInt(pos));
      }
    }
  "),
  # 顶部的长数据表
  DTOutput("long_table"),
  # 模拟长内容，让输入控件处于页面底部
  br(), br(), br(), br(), br(), br(), br(), br(), br(), br(),
  # 底部的输入控件
  sliderInput("row_count", "显示行数", min = 10, max = 50, value = 20),
  selectInput("filter_column", "筛选列", choices = c("mpg", "cyl", "disp", "hp"))
)

server <- function(input, output, session) {
  # 高优先级监听输入变化：先保存当前滚动位置
  observeEvent(c(input$row_count, input$filter_column), {
    js$saveScroll()
  }, priority = 1)
  
  # 响应输入的动态数据
  filtered_data <- reactive({
    mtcars %>%
      select(input$filter_column, everything()) %>%
      head(input$row_count)
  })
  
  # 渲染数据表
  output$long_table <- renderDT({
    datatable(filtered_data(), options = list(pageLength = input$row_count))
  }, server = FALSE) # 这里用客户端渲染，服务器端渲染也可，后续调整时机即可
  
  # 低优先级恢复滚动：确保表格更新完成后再执行
  observeEvent(filtered_data(), {
    js$restoreScroll()
  }, priority = -1)
}

shinyApp(ui, server)

方法2：纯JS阻止Shiny默认滚动行为 #

如果不想额外引入包，可以直接用原生JavaScript覆盖Shiny的默认滚动逻辑，实时保存用户的滚动位置，输入变化后立即恢复：

library(shiny)
library(DT)
library(dplyr)

ui <- fluidPage(
  tags$script(HTML("
    // 实时保存用户滚动的位置
    $(window).scroll(function() {
      sessionStorage.setItem('scrollPos', window.scrollY);
    });
    
    // 监听输入变化事件，阻止默认滚动
    $(document).on('shiny:inputchanged', function() {
      setTimeout(function() {
        var savedPos = sessionStorage.getItem('scrollPos');
        if (savedPos) {
          window.scrollTo(0, parseInt(savedPos));
        }
      }, 10);
    });
  ")),
  DTOutput("long_table"),
  # 模拟长内容
  br(), br(), br(), br(), br(), br(), br(), br(), br(), br(),
  sliderInput("row_count", "显示行数", min = 10, max = 50, value = 20),
  selectInput("filter_column", "筛选列", choices = c("mpg", "cyl", "disp", "hp"))
)

server <- function(input, output, session) {
  filtered_data <- reactive({
    mtcars %>%
      select(input$filter_column, everything()) %>%
      head(input$row_count)
  })
  
  output$long_table <- renderDT({
    datatable(filtered_data(), options = list(pageLength = input$row_count))
  })
}

shinyApp(ui, server)

额外注意事项 #

如果你的数据表用的是服务器端渲染（server = TRUE），可以把恢复滚动的时机调整为监听数据表更新完成的事件：

$(document).on('shiny:value', function(e) {
  // 只针对目标数据表的更新事件
  if (e.name === 'long_table') {
    var savedPos = sessionStorage.getItem('scrollPos');
    if (savedPos) {
      window.scrollTo(0, parseInt(savedPos));
    }
  }
});

两种方法都不会延迟表格更新，完全符合你“即时响应输入”的需求，用户操作输入控件后，页面会停留在原来的位置，不用反复滚动到底部。

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