本文将指导你如何使用 Shiny 和 Sortable.js 库创建一个具有固定高度和滚动条的 bucket list。通过添加 CSS 样式来限制容器高度，并设置 overflow 属性，即可实现当列表项过多时，在容器右侧显示滚动条的效果。
实现可滚动 Bucket List 的步骤
以下步骤将详细介绍如何修改现有的 Shiny 应用，使其 bucket list 容器具有固定的高度和滚动条。
1. 修改 UI 代码
首先，需要修改 ui.R 文件（或者 app.R 文件中的 UI 部分），为 bucket list 容器添加额外的 div 包装器，并添加相应的 CSS 样式。
library(shiny) library(sortable) ui <- fluidPage( tags$head( tags$style(HTML(".bucket-list-container {min-height: 350px;}")) ), fluidRow( column( width = 12, #choose list of variable names to send to bucket list radioButtons(inputId="variableList", label="Choose your variable list", choices = c("names(mtcars)"="names(mtcars)","state.name"="state.name")), #input text to subset variable names textInput( inputId = "subsetChooseListText", label = "Input text to subset list of states to choose from", value = "c" ), div( # class value is current default class value for container class = "bucket-list-container default-sortable", "Drag the items in any desired bucket", # 添加wrapper div div(style = "width: 100%; height: 200px; overflow-y: auto;", # class value is current default class value for list div( class = "default-sortable bucket-list bucket-list-horizontal", # need to make sure the outer div size is respected # use the current default flex value uiOutput("selection_list", style="flex:1 0 200px;"), rank_list( text = "to here", labels = list(), input_id = "rank_list_2", options = sortable_options(group = "mygroup") ), rank_list( text = "and also here", labels = list(), input_id = "rank_list_3", options = sortable_options(group = "mygroup") ) ) ) ) ) ), fluidRow( column( width = 12, tags$b("Result"), column( width = 12, tags$p("input$rank_list_1"), verbatimTextOutput("results_1"), tags$p("input$rank_list_2"), verbatimTextOutput("results_2"), tags$p("input$rank_list_3"), verbatimTextOutput("results_3") ) ) ) ) server <- function(input,output) { #initialize reactive values varList <- reactive({ req(input$variableList) if (input$variableList == "state.name") { state.name } else { paste0(rep(names(mtcars), 20),"_", 1:220) } }) subsetChooseList <- reactive({ items <- varList() pattern <- input$subsetChooseListText if (nchar(pattern) < 1) { return(items) } items[ grepl( x = items, pattern = input$subsetChooseListText, ignore.case = TRUE ) ] }) output$selection_list <- renderUI({ labels <- subsetChooseList() # remove already chosen items labels <- labels[!( labels %in% input$rank_list_2 | labels %in% input$rank_list_3 )] rank_list( text = "Drag from here", labels = labels, input_id = "rank_list_1", options = sortable_options(group = "mygroup") ) }) #visual output for debugging output$results_1 <- renderPrint(input$rank_list_1) output$results_2 <- renderPrint(input$rank_list_2) output$results_3 <- renderPrint(input$rank_list_3) } shinyApp(ui, server)
代码解释：
- 添加包装器 div: 在 uiOutput(“selection_list”)， rank_list(“to here”)， rank_list(“and also here”) 的外层增加了一个 div 元素。
- 设置样式: 使用 style = “width: 100%; height: 200px; overflow-y: auto;” 为包装器 div 设置样式。
- width: 100%; 确保容器宽度与父元素一致。
- height: 200px; 设置容器的固定高度（可以根据需要调整）。
- overflow-y: auto; 当内容超出容器高度时，显示垂直滚动条。
2. 运行应用
保存修改后的代码，并重新运行 Shiny 应用。现在，如果 Drag from here 列表中的项目数量超过容器的高度（200px），就会在容器右侧显示一个垂直滚动条，允许用户滚动浏览所有列表项。
注意事项：
- 高度调整： 根据实际需求调整 height 属性的值，以适应不同数量的列表项。
- CSS 类： 可以将 CSS 样式定义在单独的 CSS 文件中，并在 tags$head 中引用，以提高代码的可维护性。
- 响应式设计： 考虑在不同屏幕尺寸下的显示效果，可能需要使用 CSS 媒体查询进行调整。
总结：
通过简单的 CSS 样式设置，就可以轻松地为 Shiny 应用中的 bucket list 添加滚动条，从而提高用户体验，尤其是在处理大量列表项时。关键在于使用一个 div 元素包裹 rank_list，并设置 overflow-y: auto;，同时指定一个合适的 height 值。
css react html js app ai 响应式设计 overflow red css auto JS overflow ui