如何在R Shiny中让tabsetPanel的tabPanel内容可滚动？

我把tabsetPanel放在一个小div里，现在只能通过div(style = "overflow-y: auto")让整个tabsetPanel滚动，但希望标签名称始终保持可见，要实现标签固定、仅内容区域滚动的效果。

解决方案 #

核心思路是让tab的标签栏保持固定，仅让每个tab内的内容区域单独滚动。通过自定义CSS调整布局，同时修改容器样式即可实现：

library(shiny)

generate_content <- function() {
  content <- lapply(1:100, function(i) {
    p(i)
  })
  
  tagList(content)
}

ui <- fluidPage(
  # 自定义CSS控制tab内容区域的滚动与布局
  tags$style(HTML("
    .fixed-tab-content {
      height: calc(50vh - 60px); /* 减去标签栏高度，适配外层容器 */
      overflow-y: auto;
      padding: 10px;
    }
    .tab-content>.active {
      height: 100%;
    }
  ")),
  tabPanel("test",
           fluidRow(
             column(width = 2,
                    fluidRow(style = "height: 50vh; border: 1px solid #ddd; border-radius: 5px; background-color: #f8f8f8; padding: 10px;",
                             div(id = "necessaryforsomereason",
                                 tabsetPanel(
                                   tabPanel("tab1", div(class = "fixed-tab-content", generate_content())),
                                   tabPanel("tab2", div(class = "fixed-tab-content", generate_content())),
                                   tabPanel("tab3", div(class = "fixed-tab-content", generate_content())),
                                   tabPanel("tab4", div(class = "fixed-tab-content", generate_content())),
                                   tabPanel("tab5", div(class = "fixed-tab-content", generate_content())),
                                   tabPanel("tab6", div(class = "fixed-tab-content", generate_content())),
                                   tabPanel("tab7", div(class = "fixed-tab-content", generate_content())),
                                   tabPanel("tab8", div(class = "fixed-tab-content", generate_content())),
                                   tabPanel("tab9", div(class = "fixed-tab-content", generate_content()))
                                 )
                             )
                    )
             ),
             column(width = 10,
                    fluidRow(
                      plotOutput("plot")
                    )
             )
           )
  )
)

server <- function(input, output) {

}

shinyApp(ui, server)

关键修改说明 #

• 移除了外层fluidRow的overflow-y: auto，避免整个tabsetPanel滚动
• 添加自定义CSS类.fixed-tab-content，通过calc(50vh - 60px)计算内容区域高度（预留标签栏空间），并开启垂直滚动
• 给每个tabPanel的内容套上div(class = "fixed-tab-content")，实现内容区域单独滚动
• 设置.tab-content>.active高度为100%，确保激活的tab内容能占满分配空间

修改后tab标签栏会固定在容器顶部，仅内容区域根据长度滚动，符合需求。

内容的提问来源于stack exchange，提问作者toxin