使用自定义toolbar时全屏模式不显示按钮的问题

当同时设置data-toolbar="#toolbar"和data-show-fullscreen="true"时，全屏状态下工具栏消失大概率是默认样式冲突或事件逻辑问题，试试下面的方案：

• 强制覆盖全屏样式：检查程序自带的全屏CSS规则，通常会有隐藏非全屏内容的逻辑。直接添加自定义样式强制显示工具栏：

  /* 全屏状态下保持工具栏可见 */
  :fullscreen #toolbar {
      display: block !important;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      box-sizing: border-box;
  }
  

• 手动控制全屏事件：如果自动绑定的逻辑有bug，自己监听全屏切换事件来控制工具栏状态：

  // 监听全屏切换事件
  document.addEventListener('fullscreenchange', () => {
      const toolbar = document.getElementById('toolbar');
      if (!toolbar) return;
      
      if (document.fullscreenElement) {
          // 进入全屏：固定工具栏位置并显示
          toolbar.style.display = 'block';
          toolbar.style.position = 'fixed';
          toolbar.style.zIndex = '9999';
      } else {
          // 退出全屏：恢复原有样式
          toolbar.removeAttribute('style');
      }
  });
  

• 确认元素选择器正确性：检查#toolbar对应的DOM元素是否存在，ID拼写是否正确，避免因选择器无效导致工具栏未被正确绑定。

• 调整属性加载顺序：尝试调换data-toolbar和data-show-fullscreen的设置顺序，部分库对属性初始化顺序敏感，先设置工具栏再开启全屏可能解决问题。

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