时间戳

首页 > 解决方案 > 允许滚动越过闪亮仪表板的底部

r - 允许滚动越过闪亮仪表板的底部

问题描述

当我在我的 Shiny 应用程序中插入新元素时，我希望最后一个元素位于顶部，因此能够滚动到闪亮仪表板的底部。

例如，在下面的 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)

标签： rshinyshinydashboard

解决方案

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

一种方法是在第一个元素之后创建一个空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

推荐阅读