Question

假设我在Shiny-app以下-

library(markdown)

ui =
shinyUI(
  navbarPage(id = "Navbar", "Navbar",
                tabPanel(tabName = "Tab1", "Tab1", 
                          div(style = "height: 2000px; width: 1500px; margin: 0; padding: 0; overflow-y: scroll;",
                                                div(style = "height: 3000px; width: 50%; margin: 0; padding: 0;",
                                                    HTML("A")))),
                tabPanel(tabName = "Tab2", "Tab2",
                          div(style = "height: 2000px; width: 1100px; margin: 0; padding: 0; overflow-y: scroll;",
                                                div(style = "height: 3000px; width: 50%; margin: 0; padding: 0;",
                                                    HTML("B"))))
              )
)

server =
function(input, output, session) {

}

shinyApp(ui = ui, server = server)

现在，我希望当用户第一次单击2nd tab时，app应该自动向下滚动到容器页面和bottom的{{1}}处。我正在考虑进行某种平滑的滚动。

有什么办法可以做到这一点？

任何指针都会受到赞赏。

根据@dcruvolo关于添加数据名称的建议，我修改了div-

app

不幸的是，滚动效果不可见。

Answer 1

您可以通过创建一个事件监听器来滚动到页面底部，该事件监听器在单击“制表2”时运行。选择所需的元素并提取scrollHeight属性的值，然后将其传递到jquery的scrollTop()中。（我已经将它附加到document.body上，但是您可以用它替换任何您喜欢的元素。）

这是使用on click事件的示例应用程序。我使用tags$script添加了它。要将事件附加到另一个标签，请用所需标签的名称替换data-value。

library(shiny)
ui <- tagList(
    navbarPage(
        id = "Navbar", "Navbar",
        tabPanel(
            tabName = "Tab1", "Tab1",
            div(
                style = "height: 2000px; width: 1500px; margin: 0; padding: 0; overflow-y: scroll;",
                div(
                    style = "height: 3000px; width: 50%; margin: 0; padding: 0;",
                    HTML("A")
                )
            )
        ),
        tabPanel(
            tabName = "Tab2", "Tab2",
            div(
                style = "height: 2000px; width: 1100px; margin: 0; padding: 0; overflow-y: scroll;",
                div(
                    style = "height: 3000px; width: 50%; margin: 0; padding: 0;",
                    HTML("B")
                )
            )
        )
    ),
    tags$script(
        "
        // select desired tab link
        $('a[data-value=\"Tab2\"]').bind('click', function(event) {

            // scroll to bottom of page
            $('html, body').animate({
                scrollTop: document.body.scrollHeight
            }, 500);

            // remove
            $(this).unbind('click');
        })
        "
    )
)

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

shinyApp(ui = ui, server = server)

滚动到导航栏页面的底部

1 个答案: