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

Question

关于SO的第一个问题——请温柔一点。

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

网页

我遇到的问题是，每当指针位于 iframe 上时，flutter 应用程序都会吸收滚动/滚轮事件，即使应用程序不包含可滚动内容。我已经尝试了几乎所有我能研究的东西，从 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>

Answer 1

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

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

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

有关更多信息，请参阅https://github.com/flutter/flutter/issues/78216 。