如何禁用嵌入式 Flutter Web 应用的滚动操作？答案

【问题标题】：How to disable scroll actions for embedded Flutter web app?如何禁用嵌入式 Flutter Web 应用的滚动操作？
【发布时间】：2020-08-05 08:28:10
【问题描述】：

关于 SO 的第一个问题 - 请保持温和。

我有一个简单的 Flutter Web 应用程序，我将其嵌入到现有网页中。该应用程序托管在 firebase 上，我在单独托管的父页面上使用 iFrame 来显示颤振应用程序。下图。

web page

我遇到的问题是，只要指针在 iframe 上，颤动应用程序就会吸收滚动/滚轮事件，即使应用程序不包含可滚动内容。我已经尝试了几乎所有我能研究的东西，从 js 脚本到 iframe 属性再到 css。没有任何效果。父页面也不接受jQuery。

这是我在父网页上尝试过的代码 - 控制台日志事件没有被触发（至少在使用 chrome 开发工具时）所以我没有尝试将轮事件传递给父页面还没有。

    <style>
 #app{
height: 280px;
 width: 90%;
 background-color: white;
 margin: 0 auto;
 border: none;
overflow-y: hidden;
 }
 </style>
<iframe id="app" src="https://fireball-apps-testimonials.firebaseapp.com/" scroll="no" scrolling="no"></iframe>
<script type="text/javascript">

var app = document.getElementById("app");
function myFunction(event) {
console.log('event triggered');
if (event) {
 if (event.wheelData< 0)
 {
 console.log('scrolling up');
 }
 else if (event.wheelData> 0)
 {
 console.log('scrolling down');
 }
}
else {
console.log('event is null');
}
}

app.addEventListener("wheel", myFunction);

</script>

【问题讨论】：

您找到解决方法了吗？
我也想知道如何解决这个问题

标签： javascript html css flutter flutter-web

【解决方案1】：

我尝试了很多方法来禁用父网页上有关 CSS 和 Javascript 的滚动操作。问题是 Flutter 监听所有滚动事件，即使你没有可滚动的小部件。所以目前我已经搜索了相关代码，以禁用滚动操作：

使用flutter build web 构建您的项目
打开build/web/main.dart.js
搜索并删除s.addEventListener.apply(s,["wheel",q,r])

警告：不建议编辑构建文件，但这是我发现在 iFrame 中禁用滚动操作的唯一方法。当您删除事件侦听器时，您将无法在 iFrame 中滚动，并且此解决方法仅适用于桌面。

更多信息请参见https://github.com/flutter/flutter/issues/78216。

【讨论】：

【解决方案2】：

从main.dart.js 中删除s.addEventListener.apply(s,["wheel",q,r]) 可以让您通过鼠标滚轮进行滚动，但是对于没有滚轮的触摸屏，您仍然会遇到问题。我发现 iframe 内 body 的 CSS 中的 touch-action: none 行阻止了触摸滚动。要修复它，请将其设置为 touch-action: initial。不过，这会弄乱 iframe 内的所有滚动，因此如果您想在 iframe 内进行水平滚动并能够垂直滚动整个页面，请将其设置为 touch-action: pan-y。

【讨论】：