仅在CSS height: 90vh; overflow-y: auto;的帮助下，我正在使用闪亮的应用程序中的侧边栏使用滚动条。然后，如果我在侧边栏中使用shinyWidgets::dropdown，就会出现问题：如果下拉面板大于侧边栏面板，则它会被侧边栏面板裁剪（请参阅随附的gif）。

也许我有一个JavaScript解决方案，但不是一个简单的解决方案，并且我正在与一些不熟悉JavaScript且不喜欢使用JavaScript的同事合作（这会使应用程序的维护复杂化）。有CSS解决方案吗？还是简单 JavaScript解决方案？

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      style = "height: 90vh; overflow-y: auto;",sliderInput("bins","Number of bins:",min = 1,max = 50,value = 30),br(),dropdown(
        tags$h1("A very large dropdown"),label = "Open me!",width = "500px"
      ),sliderInput("bins2",sliderInput("bins3",sliderInput("bins4",sliderInput("bins5",sliderInput("bins6",sliderInput("bins7",sliderInput("bins8",sliderInput("bins9",sliderInput("bins10",sliderInput("bins11",sliderInput("bins12",sliderInput("bins13",sliderInput("bins14",sliderInput("bins15",sliderInput("bins16",value = 30)
    ),mainPanel(
      plotOutput("distPlot")
    )
  )
)


server <- function(input,output) {
  output$distPlot <- renderPlot({
    x    <- faithful[,2] 
    bins <- seq(min(x),max(x),length.out = input$bins + 1)
    hist(x,breaks = bins,col = 'darkgray',border = 'white')
  })
}

shinyApp(ui = ui,server = server)

编辑

这是一个JavaScript解决方案：

js <- '
$(document).ready(function(){
  $("[id^=sw-content-]").on("shown",function(){
    $(".sidebar").css({"overflow-y": "visible"});
  }).on("hidden",function(){
    $(".sidebar").css({"overflow-y": "auto"});
  });
});
'
ui <- fluidPage(
  tags$head(tags$script(js)),sidebarLayout(
    sidebarPanel(
      class = "sidebar",style = "height: 90vh; overflow-y: auto;",.......

但是我不确定它不会导致其他问题。如果下拉菜单的高度很大，则无法使用此解决方案滚动。

编辑2

嗯...最后，也许JS解决方案很好。我们可以使用主滚动条滚动一个高高的下拉面板：