R Shiny CSS设置：含多absolutePanel的应用如何实现XY双向滚动

问题核心原因 #

你当前的代码中所有absolutePanel都设置了fixed = TRUE，这类fixed定位元素会固定在浏览器视口位置，脱离正常文档流，不会跟随页面滚动位移，同时承载面板的父容器没有设置对应的定位基准和溢出滚动规则，因此窗口缩小时无法正常滚动查看所有面板。

核心修改点 #

• 将所有absolutePanel的fixed参数从TRUE改为FALSE，让面板基于父容器做绝对定位，可随页面滚动
• 给标签页内容容器添加自定义CSS，设置相对定位作为面板的定位基准，同时设置最小宽高和自动溢出滚动规则

修改后完整代码 #

library(dplyr)
library(shiny)
library(shinyjs)
library(leaflet)

ui <- shiny::navbarPage(

  # 启用shinyjs工具
  shinyjs::useShinyjs(),

  # 导航栏标识
  id = "nav",

  # 导航栏位置
  position = "static-top",

  # 测试标签页
  shiny::tabPanel(title = "Test",
                  value = "test-tab",
              
              # 父容器自定义CSS
              shinyjs::inlineCSS("
              .tab-content>.active {
                position: relative;
                min-width: 1750px; /* 可根据实际面板总宽度自行调整 */
                min-height: 900px; /* 可根据实际面板总高度自行调整 */
                overflow-x: auto;
                overflow-y: auto;
                height: calc(100vh - 50px); /* 适配导航栏高度，可调整 */
              }
              "),
              
              #-----面板1-----
              
              shinyjs::inlineCSS("#u-panel-1.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
              
              shiny::absolutePanel(id = "u-panel-1",
                                   class = "ap",
                                   fixed = FALSE,
                                   draggable = FALSE,
                                   top = 180,
                                   left = 55,
                                   right = "auto",
                                   bottom = "auto",
                                   width = 200),
              
              #-----面板2-----
              
              shinyjs::inlineCSS("#u-panel-2.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
              
              shiny::absolutePanel(id = "u-panel-2",
                                   class = "ap",
                                   fixed = FALSE,
                                   draggable = FALSE,
                                   top = 272,
                                   left = 55,
                                   right = "auto",
                                   bottom = "auto",
                                   width = 200),
              
              #-----面板3-----
              
              shinyjs::inlineCSS("#u-panel-3.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
              
              shiny::absolutePanel(id = "u-panel-3",
                                   class = "ap",
                                   fixed = FALSE,
                                   draggable = FALSE,
                                   top = 180,
                                   left = 263,
                                   right = "auto",
                                   bottom = "auto",
                                   width = 429,
                                   height = 178),
              
              #-----面板4-----
              
              shinyjs::inlineCSS("#u-panel-4.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
              
              shiny::absolutePanel(id = "u-panel-4",
                                   class = "ap",
                                   fixed = FALSE,
                                   draggable = FALSE,
                                   top = 180,
                                   left = 700,
                                   right = "auto",
                                   bottom = "auto",
                                   width = 429,
                                   height = 178),
              
              #-----面板5-----
              
              shinyjs::inlineCSS("#u-panel-5.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }"),
              
              shiny::absolutePanel(id = "u-panel-5",
                                   class = "ap",
                                   fixed = FALSE,
                                   draggable = FALSE,
                                   top = 366,
                                   left = 55,
                                   right = "auto",
                                   bottom = "auto",
                                   width = 1074,
                                   height = 220),
              
              #-----面板6-----
              
              shinyjs::inlineCSS("#u-panel-6.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #8ebfdb; border-style: solid; border-color: black; border-width: 1px; }"),
              
              shiny::absolutePanel(id = "u-panel-6",
                                   class = "ap",
                                   fixed = FALSE,
                                   draggable = FALSE,
                                   top = 594,
                                   bottom = "auto",
                                   left = 55,
                                   right = "auto",
                                   height = 177,
                                   width = 425),
              
              #-----面板7-----
              
              shinyjs::inlineCSS("#u-panel-7.ap { padding-top: 10px; padding-bottom: 0px; padding-left: 30px; padding-right: 0px; background-color: #f4ac90; border-style: solid; border-color: black; border-width: 1px; }"),
              
              shiny::absolutePanel(id = "u-panel-7",
                                   class = "ap",
                                   fixed = FALSE,
                                   draggable = FALSE,
                                   top = 594,
                                   left = 489,
                                   right = "auto",
                                   bottom = "auto",
                                   height = 177,
                                   width = 640),
              
              #-----地图面板-----
              
              shiny::absolutePanel(id = "u-map-panel",
                                   class = "ap",
                                   fixed = FALSE,
                                   draggable = FALSE,
                                   top = 60,
                                   left = 1138,
                                   right = "auto",
                                   bottom = "auto",
                                   height = 526,
                                   width = 552,
                                   
                                   #-----渲染地图-----
                                   
                                   shinyjs::inlineCSS("#my-map { border-style: solid; border-color: black; margin: 0px; border-width: 1px; }"),
                                   
                                   leaflet::leafletOutput("my-map", width="100%", height="100%")
                                   
              )
              
  ) # 测试标签页结束

) # UI函数结束


server <- function(input, output, session) {

  #-----底图UI输出-----

  output$`my-map` <- leaflet::renderLeaflet({
    # 初始化交互式地图
    interactiveMap <- leaflet::leaflet(options=leaflet::leafletOptions(minZoom = 4, zoomControl = TRUE, dragging = TRUE)) %>%
      leaflet::addProviderTiles("CartoDB.Positron") 
    # 返回结果
    return(interactiveMap)
  })

} # 服务端函数结束


shiny::shinyApp(ui, server)

效果说明 #

修改后当浏览器窗口尺寸小于设置的min-width/min-height时，会自动出现X轴和Y轴滚动条，所有面板可跟随滚动正常显示，若后续调整面板位置尺寸，对应修改CSS中的最小宽高参数即可。

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