r-如何在Shinyapp中自动滚动到div的底部？ [英] r - How do I automatically scroll to the bottom of a div in shinyapp?

问题描述

每当添加新内容时，我都希望将滚动条保持在底部。

I wanted to keep the scroll bar at the bottom whenever new contents were added.

printText <- function() {
  for(i in 1:20){
    Sys.sleep(0.1)
    shinyjs::html("text", paste("My text", i, "<br>"), add = TRUE)
    y = i + 1
  }
  return(y)
}
library(shiny)
library(shinyjs)
runApp(list(
  ui = shinyUI(fluidPage(
    shinyjs::useShinyjs(),
    titlePanel("Print consol output"),
    sidebarLayout(
      sidebarPanel(actionButton("go", "Go")),
      mainPanel(
        style = "overflow-y:scroll; max-height: 100px; position:relative;",
        div(id = "text")
      )
    )
  )),
  server = shinyServer(function(input, output, session){
    observeEvent(input$go, {
      shinyjs::html("text", "")
      y <- printText()
    })
  })
))

我找到了名为java的相关解决方案脚本，但对我而言不起作用

I've found relevant solutions that called javascript but it didn't work in my case.

这是js代码：

function scrollToBottom(){
  var elem = document.getElementById('text');
  elem.scrollTop = elem.scrollHeight;
};

我尝试在div之前添加includeScript来调用该函数，例如includeScript（ myJSfile .js），但没有用。

I've tried to add includeScript before div to call the function, for example, includeScript("myJSfile.js"), but it didn't work.

我在做什么错了？

非常感谢

推荐答案

这对我有用：

library(shiny)

ui <- fluidPage(
  tags$head(
    # Some css to style the div to make it more easily visible
    tags$style(
      '#outDiv{
        height:150px;
        overflow-y:scroll;
        border: 1px solid black;
        border-radius:15px;
        padding:15px;
      }
      '
    ),
    # Custom shiny to javascript binding
    # scrolls "outDiv" to bottom once called
    tags$script(
      '
      Shiny.addCustomMessageHandler("scrollCallback",
        function(color) {
          var objDiv = document.getElementById("outDiv");
          objDiv.scrollTop = objDiv.scrollHeight;
        }
      );'
    )
  ),
  sidebarLayout(
    sidebarPanel(
      actionButton('go','Start Printing')
    ),
    mainPanel(
      div(id='outDiv',
        htmlOutput('out')
      )
      # Text output

    )
  )
)

server <- function(input, output, session) {
  autoInvalidate <- reactiveTimer(250, session) # Timer function

  ptm      <- proc.time() # Start time
  startTxt <- ''          # Start string to show on screen

  # Function to print new line when reactiveTimer invalidates
  startPrint <- function(){
    output$out <- renderText({ 
      ctm <- proc.time() - ptm
      autoInvalidate() # Start invalidating function every n miliseconds

      # Format string to print
      curr.font <- sample(colours(distinct=T), 1) 
      curr.txt  <- sprintf('<font color="%s"> %4.2f</font> seconds from start <br>', curr.font, ctm[[3]]) 
      startTxt  <<- paste(startTxt, curr.txt, collapse = '')

      # Call custom javascript to scroll window
      session$sendCustomMessage(type = "scrollCallback", 1)

      return(startTxt)
    })
  }

  observeEvent(input$go,{
    startPrint()
  })
}

runApp(shinyApp(ui,server))

这里的窍门是，每当我更新文本输出时，我就调用Javascript函数滚动div。让我知道这个答案是否令人费解。

The trick here is that I call the Javascript function to scroll the div every time I update the text output. Let me know if this answer is to convoluted.

这篇关于r-如何在Shinyapp中自动滚动到div的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！