时间戳

首页 > 解决方案 > 滚动到导航栏页面的底部

r - 滚动到导航栏页面的底部

问题描述

假设我在下面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容器页面和div. 我正在考虑进行某种平滑滚动。

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

任何指针将不胜感激。

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

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", `data-name` = "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-name=\"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)

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

标签： rshinyshinyapps

解决方案

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

这是使用点击事件的示例应用程序。我使用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)

推荐阅读