css - 绝对面板中的滚动条覆盖（并使其处于非活动状态）操作按钮

Question

我有一个闪亮的应用程序，屏幕中央有一个绝对面板。在这个面板中，我展示了一张长图。此外，此面板actionButton()在右上角有一个可以关闭它。
如果在style()绝对面板的命令中，我添加 CSS 代码以插入垂直滚动条，则此滚动条（即使它处于非活动状态）会覆盖 actionButton，我无法再单击它。下面是一个代表：

library(shiny)
library(shinyjs)

ui <- fluidPage(

  useShinyjs(),

  absolutePanel(
    id = "image_panel",
    fixed = TRUE,
    top = "5%",
    left = "23%",
    right = "23%",
    bottom = "5%",
    width = "auto",
    height = "70%",
    style = "background-color: lightblue;
             overflow-y: scroll;",

    actionButton(inputId = "close_panel",
                 label = icon(name = "times",
                              lib = "font-awesome"),
                 style = "position: absolute;
                          top: 0;
                          right: 0;
                          background-color: rgba(0, 0, 0, 0);
                          border-width: 0px;
                          padding: 0px 5px 0px 0px;
                          z-index: 100000;"),

br(),
br(),

    uiOutput(outputId = "image")

  )

)

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

  observeEvent(input$close_panel, {

    hideElement(id = "image_panel")

  })

  output$image <- renderUI({

    tags$img(src = "https://tests-images-bucket.s3.eu-central-1.amazonaws.com/qWgXjZn.png",
             width = "90%")

  })

}

shinyApp(ui, server)

为了解决这个问题，我不得不将滚动条的宽度设置为零。但这不是最好的解决方案。最好的解决方案是让滚动条从“X”按钮的正下方开始（为了不禁用按钮），并且在滚动时它应该是可见的。

任何想法？谢谢你的帮助！

标签： cssrshinyscrollbarpanel