R闪亮的应用程序，制作自动向下滚动的日志答案

【问题标题】：R shiny app, making a log that scrolls down automaticallyR闪亮的应用程序，制作自动向下滚动的日志
【发布时间】：2019-07-21 01:38:09
【问题描述】：

我正在尝试使日志闪亮，该文本取自函数更新的反应值。该日志位于verbatimTextOutput 中，我希望它在每次更新时向下滚动。为此，我使用了一个使用我找到here 的javascript 代码的函数，但是在控制台更新后立即使用时它不起作用，它实际上向下滚动到上一次更新的级别（因为UI 值还没有更新？）。我尝试了不同的方法在不同的时间启动该功能，但无法将滚动条拉到底部。

这是我正在尝试的示例，我希望“添加文本”按钮一直向下滚动，但只有“强制滚动更新”按钮可以做到：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  extendShinyjs(text = "shinyjs.scrollDown = function() {
                            var objDiv = document.getElementById('log');
                            objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
                          }"),
  tags$style(HTML("#log {height:80px}")), br(),
  verbatimTextOutput("log", placeholder = TRUE),
  actionButton("add", "Add Text"),
  actionButton("force", "Force scroll update")
)

server <- function(input, output, session) {

  a <- reactiveValues(
    logOutput = "TEST"
  )

  output$log <- renderText({ a$logOutput })

  updateLog <- function(text){
    a$logOutput <- paste(a$logOutput, text, sep = "\n")
  }

  observeEvent(input$add, {
    updateLog("TEST")
    js$scrollDown()
  })  

  observeEvent(input$force,{
    js$scrollDown()
  })

}

shinyApp(ui = ui, server = server)

希望能做到，谢谢

【问题讨论】：

标签： javascript r shiny shinyjs

【解决方案1】：

一个选项：

js <- "
$(document).on('shiny:value', function(evt){
  if(evt.name == 'log'){
    setTimeout(function(){
      var objDiv = document.getElementById('log');
      objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
    }, 500); // wait 500 milliseconds
  }
});
"

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js))
  ),
  tags$style(HTML("#log {height:80px}")), br(),
  verbatimTextOutput("log", placeholder = TRUE),
  actionButton("add", "Add Text")
)

server <- function(input, output, session) {

  a <- reactiveValues(
    logOutput = "TEST"
  )

  output$log <- renderText({ a$logOutput })

  updateLog <- function(text){
    a$logOutput <- paste(a$logOutput, text, sep = "\n")
  }

  observeEvent(input$add, {
    updateLog("TEST")
  })  

}

一个没有延迟的解决方案，使用MutationObserver:

js <- "
$(document).ready(function(){
  var objDiv = document.getElementById('log');
  // create an observer instance
  var observer = new MutationObserver(function(mutations) {
    objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
  });
  // configuration of the observer
  var config = {childList: true};
  // observe objDiv
  observer.observe(objDiv, config);
})
"

【讨论】：

感谢这个解决方案对我有用，我只是将延迟更改为 1 毫秒，非常适合我的目的！
@Ganthark 不错。请参阅我的编辑。我添加了一个不使用setTimeout的解决方案。