Javascript 自动在按钮上滚动并单击

我有一个选项卡式的闪亮应用程序，它根据用户输入生成相当多的内容，我正试图弄清楚如何在每次生成新内容时滚动到活动选项卡的底部。我尝试实现本文给出的答案，但似乎不起作用。我对javaScript几乎没有经验，因此可能需要对我的特定示例进行一些更改。下面是一个非常愚蠢的玩具示例，我试图实现链接问题的答案：

library(shiny)

ui <- fluidPage(
  tags$script(
    '
      Shiny.addCustomMessageHandler("scrollCallback",
      function(color) {
      var objDiv = document.getElementById("outDiv");
      objDiv.scrollTop = objDiv.scrollHeight;
      }
      );'
  ),
  tabsetPanel(id = "mainPanels",
    tabPanel("FirstPanel",
      actionButton("outGen", "GenerateOutput"))),
      uiOutput("randomOutput")
)

server <- function(input, output, session) {
    output$randomOutput <- renderUI({
      req(input$outGen)
      lapply(1:50, function(x)p("FooBar"))
    })
    observeEvent(input$outGen,{
      session$sendCustomMessage(type = "scrollCallback", 1)
    })
}

runApp(shinyApp(ui,server))

库（闪亮）
ui这里有一个有效的修正。进行了以下更改：


更改了初始化，以便在开始之前有一些文本呈现到该
div
。这是必需的，否则一些变量将无法在
div
对象中正确初始化
修改文本输出，使其每次都更改（以便更好地测试）
在
randomOutput
div中添加了必要的CSS overflow:auto样式，这样您就可以有一个滚动条来滚动
修正了一些小错误（
getElementById
查询错误的div）
添加了一些调试输出到
scrollCallback

代码如下：

library(shiny)

ui <- fluidPage(
  tags$style('#randomOutput {   height: 450px;   overflow: auto;}'),
  tags$script(
    '
    Shiny.addCustomMessageHandler("scrollCallback",
    function(msg) {
    console.log("aCMH" + msg)
    var objDiv = document.getElementById("randomOutput");
    objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
    console.dir(objDiv)
    console.log("sT:"+objDiv.scrollTop+" = sH:"+objDiv.scrollHeight+" cH:"+objDiv.clientHeight)
    }
    );'
  ),
  tabsetPanel(id = "mainPanels",
              tabPanel("FirstPanel",
                       actionButton("outGen", "GenerateOutput"))),
  uiOutput("randomOutput")
  )

server <- function(input, output, session) {
  n <- 0
  output$randomOutput <- renderUI({
    input$outGen
    n <<- n + 50
    lapply(1:50, function(x)p(paste0("FooBar-",x+n-50)))
  })
  observeEvent(input$outGen,{
    session$sendCustomMessage(type = "scrollCallback", 1)
  })
}

runApp(shinyApp(ui,server))

库（闪亮）
太棒了！感谢您提供了非常完整的答案。这可能超出了原始问题的范围，但有没有办法通过访问主体滚动来实现这一点？当一个闪亮的应用程序使用多个uiOutput而不是使用一个uiOutput时，这将适用。因此，您无法在每个单独输出的div内滚动。更不用说，我只是通过将
window.scrollTo（0，document.body.scrollHeight）放在窗口中计算出来编码到函数中，而不是访问div的行中。