Javascript R闪亮的应用程序,制作自动向下滚动的日志
我试图使一个日志闪亮,它的文本是从一个函数更新的被动值中获取的。日志位于Javascript R闪亮的应用程序,制作自动向下滚动的日志,javascript,r,shiny,shinyjs,Javascript,R,Shiny,Shinyjs,我试图使一个日志闪亮,它的文本是从一个函数更新的被动值中获取的。日志位于逐字输出中,我希望每次更新时都能向下滚动日志。为此,我使用了一个使用我找到的javascript代码的函数,但在控制台更新后立即使用时,该函数不起作用,它实际上会向下滚动到上一次更新的级别(因为UI值尚未更新?)。我尝试了不同的方法在不同的时间启动函数,但无法将滚动条放到底部 下面是我正在尝试的示例,我希望“添加文本”按钮可以一直向下滚动,但只有“强制滚动更新”按钮可以: library(shiny) library(shi
逐字输出中,我希望每次更新时都能向下滚动日志。为此,我使用了一个使用我找到的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)
库(闪亮)
图书馆(shinyjs)
ui一个选项:
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")
})
}
谢谢你这个解决方案对我来说很有效,我刚刚把延迟改为1毫秒,它非常适合我的目的@甘塔克:很好。请参阅我的编辑。我添加了一个不使用setTimeout
的解决方案。
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);
})
"