Teams 选项卡中的 SPFX - 移动应用程序中的滚动问题

Question

我有一个 SPFX-Webpart 作为静态团队选项卡。我手动构建了清单（比如这里https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart）。到目前为止一切正常。

但我的问题是，容器在移动应用程序（在我的情况下为 android）中不可滚动。我的 webpart 的内容比显示/页面长，我无法向下滚动。此问题的原因：有一个 div 容器（具有“spAppAndPropertyPanelContainer”和“sp-appBar-parent-mobile”类）将 overflow 设置为 hidden。这个容器由 sharepoint 或团队呈现，但不是由我的 webpart 呈现。

所以我可以设置自定义 css 来覆盖默认 css 并克服这个问题。它工作正常。但是为什么这个容器设置为溢出隐藏呢？这有什么原因吗？以后我是否有任何问题让我的自定义 css 覆盖此溢出行为？

或者是否有其他解决方案可以在移动团队的自定义 spfx 应用中包含可滚动内容？

Answer 1

我今天遇到了完全相同的问题，我通过将以下代码添加到我在 Visual Studio 中的 css 文件中解决了这个问题（在 iOS 上测试）：

.spAppAndPropertyPanelContainer, .sp-appBar-parent-mobile { 
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

希望对你有帮助！