允许滚动经过闪亮仪表板的底部

编程问答 2022-07-14

问题描述

当我将新元素插入到我的 Shiny 应用程序中时，我希望最后一个元素位于顶部，从而能够滚动超过 Shinydashboard 的底部。

例如，在下面的 Shiny 应用程序中，在插入了足够多的 h3("test") 元素以致于需要滚动条之后，如何启用滚动超过应用程序底部的功能，以便最终“测试”是在屏幕顶部？

如果最后插入的元素自动位于屏幕顶部（自动滚动），则加分。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),dashboardSidebar(),dashboardBody(
    fluidPage(
      div(id="test",actionButton("bttn","bttn"))
    )
  )
)

server <- function(input,output) { 
  
  observeEvent(input$bttn,{
    insertUI("#test","afterEnd",ui = tagList(h3("test"),h3("test"),h3("test")))
  })
  }

shinyApp(ui,server)

解决方法

有多种方法可以做到这一点。

一种方法是在第一个 div 元素之后创建一个空元素。你可以给这个新元素一个相对高度的度量，这样它总是填满底部的剩余空间：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(dashboardHeader(),dashboardSidebar(),dashboardBody(fluidPage(
                      div(id = "test",actionButton("bttn","bttn")),div(style = "width: 100%; height: 90vh")
                    )))

server <- function(input,output) {
  observeEvent(input$bttn,{
    insertUI("#test","afterEnd",ui = tagList(h3("test"),h3("test"),h3("test")))
  })
}

shinyApp(ui,server)

我使用了 90vh，所以元素的高度是视口高度的 90%。

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

rrshinyshinydashboard