在Shiny中自动滚动按钮单击

Question

我有一个带标签的闪亮应用程序，根据用户输入生成相当多的内容，我试图弄清楚每次生成新内容时如何滚动到活动选项卡的底部。我试着实现这个question给出的答案，但它似乎不起作用。我对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))

按下生成输出按钮后，我试图找到一种滚动到标签底部的方法。

Answer 1

这是一个有效的修正。进行了以下更改：

• 更改了初始化，以便在我们开始之前有一些文本呈现给div。这是必要的，否则某些变量将无法在div对象中正确初始化。
• 修改了文本输出，使其每次都更改（为了更好的测试）
• 为randomOutput div添加了必要的CSS溢出：自动样式，以便滚动条滚动。
• 修正了一些小错别字（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))

以下是测试时的样子：