自動滾動按鈕點擊閃亮

Question

我有一個標籤閃亮的應用程序，根據用戶輸入生成相當多的內容，我試圖弄清楚如何滾動到活動選項卡的底部每次新內容是產生。我試着實現這個question給出的答案，但它似乎並沒有工作。我對javaScript有很少的經驗，所以它可能只是需要改變我的具體示例。下面是我嘗試從連問題實施答案很無聊的玩具例子：

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

我試圖找到一種方式，一旦產生輸出按鈕被按下滾動到標籤的底部。

Answer 1

這是一個修復工作。進行了以下更改：

• 已更改初始化，以便在開始之前將一些文本呈現給該div。這是必要的，否則一些變量將不會在div對象中正確初始化。
• 修改了文本輸出以便每次都改變（爲了更好的測試）
• 爲randomOutput div添加了必要的CSS overflow：auto style，以便您可以滾動滾動條。
• 修正了一些小的拼寫錯誤（getElementById被查詢錯誤DIV）
• 添加一些調試輸出到scrollCallback

下面是代碼：

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

，這裏是什麼樣子在測試上：