Question

我正在使用语义UI 2.3.2，并且在移动设备上出现页面滚动问题，一旦加载了模式，页面滚动功能便被禁用（甚至在之后也关闭了模式）。

甚至可以在官方网站https://semantic-ui.com/modules/modal.html上遇到这种现象，只需尝试为任何示例模式运行“运行代码”，然后尝试滚动页面。

通过搜索，我已经尝试在没有任何帮助的情况下使用observeChanges设置。

P.S。您必须在移动浏览器上检查链接。我已经在Android / Chrome上进行过测试。

Answer 1

所以这是语义UI 2.3.2 https://github.com/Semantic-Org/Semantic-UI/issues/6449

上的一个已确认错误。

我已通过将语义UI降级为2.3.1来解决此问题，该问题已得到解决。因此，面临相同问题的任何人都可以立即降级解决该问题，直到在2.3.2中解决该问题为止。

Answer 2

我通过在modal.js中注释掉一行来修复它。我不确定这样做的结果，因为我不确定会产生什么影响，但这是我可以使用它的唯一方法。我的modal.js版本是2.4.2。这是代码：

 scrollLock: function() {
        // touch events default to passive, due to changes in chrome to optimize mobile perf
        $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
      }

我注释了$dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });行

当用户执行“ touchmove”操作时，该行代码将禁止滚动（module.event.preventScroll），从而防止下拉列表滚动。注释掉该行为我解决了这个问题。

Answer 3

对于modal.js from their GitHub中共享的问题，我按照comment的建议使用Formantic-UI answer by @Alyas进行滚动工作。

因此，实际上，在<script src="lib/semantic-ui/semantic.min.js"></script>之后的index.html中，我添加了<script src="lib/formantic-ui/modal.js"></script>，使滚动工作得以实现。

语义用户界面-模态打开后，移动滚动将被禁用（即使模态关闭，移动滚动也将保持禁用）

3 个答案: