r - shinyappのdivの下に自動的にスクロールするにはどうすればいいですか？

Question

新しい内容が追加されるたびに、スクロールバーを下にしておきたい。

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

javascriptと呼ばれる関連するソリューションが見つかりましたが、私の場合は機能しませんでした。

はここでJSコードです：

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

私は、includeScript（ "myJSfile.js"）は、例えば、関数を呼び出すためにdivの前にincludeScriptを追加しようとしましたが、それはうまくいきませんでした。

私は間違っていましたか？

事前に感謝します。

Answer 1

これは私の作品：ここ

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

トリックは、私はdivの私は、テキスト出力を更新するたびにスクロールするJavaScript関数を呼び出すことです。この答えが複雑であるかどうか私に教えてください。