页面底部弹窗中rintrojs失效问题求助

为啥会出这问题？ #

当页面有大量内容（比如示例里的10000个换行），你滚动到底部再打开模态框时，rintrojs默认是基于整个文档的滚动位置计算目标元素坐标的，但模态框用的是fixed固定定位，完全脱离了文档流，导致坐标计算全错——结果就是只显示灰色遮罩，元素高亮、引导按钮全都出不来。

怎么修复？ #

核心思路是：启动rintrojs前，先把页面滚回顶部，让文档滚动位置归零，这样rintrojs就能正确识别模态框内元素的位置。具体改两处：

1. 在UI里加一段JS代码，处理滚动指令 #

在fluidPage里（比如dashboardPage之后）添加：

tags$script(HTML("
  Shiny.addCustomMessageHandler('scrollToTop', function(message) {
    window.scrollTo({top: 0, behavior: 'instant'});
  });
"))

2. 修改server里启动introjs的逻辑 #

把原来的observeEvent(input$bttn2, ...)改成：

observeEvent(input$bttn2, {
  # 给前端发指令，滚回顶部
  session$sendCustomMessage(type = "scrollToTop", message = list())
  # 等0.1秒再启动introjs，确保滚动完成
  Sys.sleep(0.1)
  introjs(session, options = list(steps = intro_df))
})

完整修复后的代码 #

library(rintrojs)
library(shiny)
library(shinydashboard)
library(shinyBS)

intro_df <- data.frame(element = c('#plot_box', '#bttn2_intro', '#box', '#plot', '#shiny-modal'),
                       intro = c('test plot_box', 'test bttn2', 'test box', 'plot', 'test modal'))

ui <- shinyUI(fluidPage(
  dashboardPage(dashboardHeader(title = "Test"),
                dashboardSidebar(sidebarMenu(menuItem("item1", tabName = "item1"))),
                dashboardBody(tabItems(tabItem("item1", 
                                              rep(br(), 10000), # 保留测试用的大量换行
                                              actionButton("bttn", "start intro")))),
  # 新增滚动到顶部的JS处理
  tags$script(HTML("
    Shiny.addCustomMessageHandler('scrollToTop', function(message) {
      window.scrollTo({top: 0, behavior: 'instant'});
    });
  ")),
  introjsUI()
))

server <- shinyServer(function(input, output, session) {
  output$plot <- renderPlot({
    plot(rnorm(50))
  })
  
  output$plot_box <- renderUI({
    box(id = 'box',
        div(id = "bttn2_intro", actionButton('bttn2', 'dummy')),
        plotOutput('plot'), width = '100%'
    )
  })
  
  observeEvent(input$bttn,{
    showModal(modalDialog(uiOutput('plot_box')))
  })
  
  observeEvent(input$bttn2, {
    # 发送滚回顶部的指令
    session$sendCustomMessage(type = "scrollToTop", message = list())
    # 短暂等待确保滚动完成
    Sys.sleep(0.1)
    introjs(session, options = list(steps = intro_df))
  })
  
})
shinyApp(ui = ui, server = server)

补充说明 #

• 加Sys.sleep(0.1)是给浏览器留够滚动的时间，要是你的模态框里有异步加载的内容（比如从数据库取数），可以适当延长这个时间，或者等元素加载完成再启动introjs；
• 这个方法本质是让文档的滚动位置和模态框的固定定位坐标体系对齐，让rintrojs能准确找到要高亮的元素。

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