Shiny框架中PRE元素内容更新后自动滚动到底部的实现方法

要实现<pre>元素内容更新后自动滚动到底部，你可以通过JavaScript操作元素的滚动属性，这里提供一种简洁且符合Shiny最佳实践的实现方式：

修改后的完整代码 #

library(shiny)

ui <- fluidPage(
  uiOutput("log"),
  actionButton("test","Click")
)

server <- function(input, output,session) {
  
  RV<-reactiveValues(myText=as.character())
  
  observeEvent(input$test,{
    text<-as.character()
    for (i in 1:100) text<-paste0(text,"hello ",i,"\n")
    RV$myText<-text
  })
  
  output$log<-renderUI({
    tagList(
      tags$pre(
        id = "preLog",
        style = "width:100px;height:200px;overflow:auto;",
        RV$myText
      ),
      tags$script(
        "document.getElementById('preLog').scrollTop = document.getElementById('preLog').scrollHeight;"
      )
    )
  })

}

shinyApp(ui = ui, server = server)

实现说明 #

1. 替换HTML字符串拼接：用Shiny内置的tags$pre和tagList构建UI，避免手动拼接HTML的转义问题，代码更易维护。
2. 添加滚动脚本：每次RV$myText更新时，renderUI会重新生成<pre>元素和对应的JavaScript脚本。脚本执行时，会将<pre>元素的scrollTop设置为其总内容高度scrollHeight，从而直接滚动到底部。

如果后续需要动态追加内容而非一次性替换，只需在内容追加后执行相同的滚动脚本即可。

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