如果在移动设备上没有回复，DiscoTOC 样式将无法正常显示

[Don]

你好

DiscoTOC 样式与 .with-topic-progress 类相关联，如果主题中有超过 1 篇帖子，该类将被添加到 .topic-navigation。因此，如果没有回复，DiscoTOC 样式将会损坏。

我认为即使主题没有回复，TOC 也应该激活，因为它与回复数量无关。在桌面上，没有回复的主题也能正常工作。

这是一个用于测试的主题：Customizing the topic list

我认为应该考虑更改此行为。

这可能不是新事物，但我还没有注意到。现在我们开始更积极地使用它。

谢谢

[JammyDodger]

我也遇到了同样的问题。 (iPhone/Safari) 如果能修复这个问题就太好了。滚动到长文档的底部以访问目录有点麻烦。

[alltiagocom (Tiago)]

凭借我基本的编码技能和一些与 ChatGPT 的交流，我认为我成功了。

创建了一个自定义组件，并将以下内容放入 CSS 选项卡：

/* CSS for Discourse component - Mobile only */
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

并在 JS 选项卡中放入了以下内容：

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) =
> {
  api.onPageChange(() =
> {
    const observer = new MutationObserver(() =
> {
      const wrapper = document.getElementById("topic-progress-wrapper");
      const tocButton = wrapper?.querySelector(".d-toc-mini button");

      if (wrapper) {
        if (tocButton) {
          wrapper.classList.add("sticky-bottom");
        } else {
          wrapper.classList.remove("sticky-bottom");
        }
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
});

即使没有回复，这似乎也能正常工作。
再说一遍，我不是专家，我只是一个善于“提问”的人，在与 ChatGPT 进行几次正确的提问和挑战的“来回”之后，它似乎奏效了。

如果任何 JavaScript 专家想改进它，请分享。

[Don]

你好

这很好，谢谢，但我认为我们也可以只用 CSS 来实现。 我们只需要在 .topic-navigation 上使用与 .with-topic-progress 相同的 CSS。缺少 .with-topic-progress 类会在主题中没有回复时阻止样式生效。

类似这样应该可以工作。

移动端 CSS

// 粘性主题导航
.container.posts .topic-navigation:not(.with-topic-progress) {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
  z-index: z("timeline");
  pointer-events: none; // 包装器可能会阻止移动端控件
  
  > * {
    pointer-events: auto; // 这个会取消上面的规则，以便子元素可以交互
  }
  
  // 添加目录样式
  .d-toc-wrapper {
    position: fixed;
    margin-top: 0.25em;
    height: calc(100vh - 50px - var(--header-offset));
    opacity: 0.5;
    right: -100vw;
    top: var(--header-offset);
    width: 75vw;
    max-width: 350px;
    background-color: var(--secondary);
    box-shadow: var(--shadow-dropdown);
    z-index: z("modal", "overlay");
    transition: all 0.2s ease-in-out;

    .d-toc-main {
      width: 100%;
      padding: 0.5em;
      height: 100%;

      #d-toc {
        max-height: calc(100% - 3em);
      }
    }

    &.overlay {
      right: 0;
      width: 75vw;
      opacity: 1;

      .d-toc-main #d-toc li.d-toc-item ul {
        transition: none;
      }
    }

    a.scroll-to-bottom,
    a.d-toc-close {
      display: inline-block;
      padding: 0.5em;
    }

    .d-toc-icons {
      text-align: right;
    }
  }
}

// RTL 支持
.rtl {
  .topic-navigation .d-toc-wrapper {
    right: unset;
    left: -100vw;

    &.overlay {
      right: unset;
      left: 0;
    }
  }
}

[chapoi]

应该可以修复，请参见

UX: add missing disco toc btn