Css 如何在页面顶部创建固定横幅，并在其下方设置滚动条

发布于11月30日

我希望滚动光标只在tabPanel之后开始.这样，向下滚动时，选项卡面板始终可见.这将在页面顶部创建一种横幅.下面是一个可重复使用的例子:

library("shiny")

txt <- paste(sapply(seq_len(100), function(x){
  p <- shiny::tags$p(stringi::stri_rand_lipsum(1))
  return(as.character(p))
}), collapse = "")


ui = navbarPage(title = "Navbar example", 
                position = c("fixed-top"),
                
                id = "navbar",
                tags$br(),
                tags$br(),
                tags$br(),
                tags$br(),
                tabPanel(title = "tab 1", 
                         tabsetPanel(id = "id1",
                                     tabPanel(title = "A",
                                              HTML(txt),
                                     ),
                                     tabPanel(title = "B",
                                              HTML(txt),
                                     )
                         )),
                tabPanel(title = "tab 2", 
                         tabsetPanel(id = "id2",
                                     tabPanel(title = "C",
                                              HTML(txt),
                                     ),
                                     tabPanel(title = "D",
                                     ),
                                     tabPanel(title = "E",
                                              HTML(txt),
                                     )
                         ))
)

server = shinyServer(function(input, output) {
})


shinyApp(ui, server)

下面是一张图片，以便更好地理解.

推荐答案

你可以用

.tabbable .tab-content {
    height: calc(100vh - 122px);
    overflow-y: auto;
}

这将导致:

library(shiny)

txt <- paste(sapply(seq_len(100), function(x){
    p <- shiny::tags$p(stringi::stri_rand_lipsum(1))
    return(as.character(p))
}), collapse = "")


ui = navbarPage(tags$head(tags$style(HTML("
                              .tabbable .tab-content {
                                height: calc(100vh - 122px);
                                overflow-y: auto;
                              }
                              "))),
    title = "Navbar example", 
                position = c("fixed-top"),
                
                id = "navbar",
                tags$br(),
                tags$br(),
                tags$br(),
                tags$br(),
                tabPanel(title = "tab 1", 
                         tabsetPanel(id = "id1",
                                     tabPanel(title = "A",
                                              HTML(txt),
                                     ),
                                     tabPanel(title = "B",
                                              HTML(txt),
                                     )
                         )),
                tabPanel(title = "tab 2", 
                         tabsetPanel(id = "id2",
                                     tabPanel(title = "C",
                                              HTML(txt),
                                     ),
                                     tabPanel(title = "D",
                                     ),
                                     tabPanel(title = "E",
                                              HTML(txt),
                                     )
                         ))
)

server = shinyServer(function(input, output) {
})


shinyApp(ui, server)