在Shiny中自动滚动按钮单击 [英] Automatically scroll on button click in Shiny

问题描述

我有一个带标签的闪亮应用程序，根据用户输入生成相当多的内容，我试图找出每次生成新内容时如何滚动到活动选项卡的底部。我试着实现这个答案

I have a tabbed shiny app that generates quite a bit of content based on user inputs and I'm trying to figure out how to scroll to the bottom of the active tab each time new content is generated. I tried implementing the answer given in this question but it doesn't seem to work. I'm have minimal experience with javaScript so it may just be something needs to be changed for my specific example. Here is a very silly toy example with my attempt at implementing the answer from the linked question:

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))

I'm trying to find a way to scroll to the bottom of the tab once the generate output button is pressed.

解决方案

Here is a fixup that works. The following changes were made:

• Changed the initialization so that there is some text rendered to that div before we start. This is necessary otherwise some of the variables will not be initialized properly in the div object.
• Modified the text output so it changes every time (for better testing)
• Added the necessary CSS overflow:auto style to the randomOutput div so that you would have a scroll bar to scroll.
• Fixed up some minor typos (getElementById was querying the wrong div)
• added some debugging output to scrollCallback

Here is the code:

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))

and here is what it looks like on testing:

这篇关于在Shiny中自动滚动按钮单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！