# \#topic-progress 元素在加载时保持可见 **URL:** https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179 **Category:** UX **Created:** [2021年二月26日 01:23 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179 "2021-02-26T01:23:16Z") **Posts on this page:** 9 **Page:** 1
### Author: ![dadberg](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dadberg/32/208954_2.png) [@dadberg](https://meta.discourse.org/u/dadberg) #### Post date: [2021年二月26日 01:23 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179/1 "2021-02-26T01:23:16Z")
当加载动画可见时，#topic-progress 元素以反模式的方式显示。 ![Screenshot_20210225-020806_Chrome](https://global.discourse-cdn.com/meta/original/3X/6/d/6dd3c12048b112da16bb3391b0f582a9b66ad8a4.jpeg) 您可以重现该行为：只需在移动端视图中打开一个主题，然后点击顶部的标题链接以触发加载动画。 有什么建议可以在加载动画可见时隐藏 #topic-progress 吗？ ---
### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror) #### Post date: [2021年三月2日 05:10 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179/2 "2021-03-02T05:10:42Z")
你能在这里复现吗，还是说这个问题只出现在那个网站上？ ---
### Author: ![dadberg](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dadberg/32/208954_2.png) [@dadberg](https://meta.discourse.org/u/dadberg) #### Post date: [2021年三月2日 13:17 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179/3 "2021-03-02T13:17:15Z")
令人惊讶的是，Meta 论坛不受此缺陷影响，但我已在我们的生产服务器以及我所知的几乎所有其他网站上成功复现了该问题。 另一个示例： ![Screenshot_20210302-150529_Chrome](https://global.discourse-cdn.com/meta/original/3X/1/6/1641faf67d3a8ec6e9eee693ce43317be913f6a0.jpeg) 编辑：似乎当主题包含大量帖子时，（主题进度）元素在不滚动页面的情况下将不可见。这就是为什么我之前在某些网站（如 Meta）上无法复现该问题的原因。 ![Screenshot_20210302-152036_Chrome](https://global.discourse-cdn.com/meta/original/3X/f/8/f84db0c5a950bf84e75dbf368e18e618c0403258.jpeg) ---
### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam) #### Post date: [2021年三月3日 00:42 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179/4 "2021-03-03T00:42:40Z")
我建议在加载下一批数据期间，对移动端的主题进度小部件进行一些调整。这听起来是一个合理的优化，但我不确定完全隐藏是否是最佳方案。 完全隐藏整个时间线会是一个反模式，因为会导致内容跳动。 @design 有什么想法吗？ 显然，这不需要急于修改，但可能是一个值得进一步优化的有趣点。 ---
### Author: ![dadberg](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dadberg/32/208954_2.png) [@dadberg](https://meta.discourse.org/u/dadberg) #### Post date: [2021年三月3日 01:05 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179/5 "2021-03-03T01:05:36Z")
感谢您的回复，我理解您对隐藏完整时间线导致页面跳动问题的担忧，因此仅预留填充空间才是可玩的方案。 这并不完全是 CSS 问题：在加载动画（spinner）激活期间，将主题进度条固定或调整填充位置属于 JavaScript 相关逻辑。 ---
### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror) #### Post date: [2021年三月3日 01:32 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179/6 "2021-03-03T01:32:00Z")
我仍然好奇为什么这里无法复现。在 [try.discourse.org](http://try.discourse.org) 上能复现吗？是否与这些网站的 CSS 布局（例如额外的标题等）有关？ ---
### Author: ![dadberg](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dadberg/32/208954_2.png) [@dadberg](https://meta.discourse.org/u/dadberg) #### Post date: [2021年三月3日 01:47 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179/7 "2021-03-03T01:47:26Z")
实际上，正如我上面的回复所述，我在此处已经成功复现了该问题。 ![image](https://global.discourse-cdn.com/meta/original/3X/7/5/757e1acdfe8b9cc4da518f16725d498903616d70.jpeg) ---
### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror) #### Post date: [2021年三月3日 04:47 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179/8 "2021-03-03T04:47:36Z")
太好了——抱歉，我刚才没注意到。 ---
### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot) #### Post date: [2021年三月3日 15:15 UTC](https://meta.discourse.org/t/topic-progress-element-keeps-visibility-while-loading/181179/9 "2021-03-03T15:15:03Z")
我认为这不会在移动设备上引起回弹，因为滚动时我们使用固定定位，而在停靠时使用绝对定位，因此它根本不会影响布局。 我快速测试了一下，只需在元素获得停靠类时通过 CSS 将其隐藏（这就是加载时定位发生跳动的原因：页面较短，进度条会停靠）……当它消失或重新出现时，并没有回弹现象。 另一种选择是取消停靠，并在加载期间保持其固定定位。但这样做的问题是，如果你从页面底部（例如在“推荐主题”处）直接跳回顶部……我担心当时间线从停靠状态切换到固定定位时，你会看到位置跳动？ 无论如何，我会尝试一下，看看哪种效果最好。