javascript - 在 Shiny 中自动滚动按钮点击

Question

我有一个带标签的 Shiny 应用程序，它根据用户输入生成相当多的内容，我试图弄清楚每次生成新内容时如何滚动到事件选项卡的底部。我尝试实现此 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 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))

这是它在测试中的样子: