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

Question

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

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

web page

我遇到的问题是，只要指针在 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 监听所有滚动事件，即使你没有可滚动的小部件。所以目前我已经搜索了相关代码，以禁用滚动操作:

使用 flutter build web 构建您的元素

打开build/web/main.dart.js

搜索和删除s.addEventListener.apply(s,["wheel",q,r])

警告:不建议编辑构建文件，但这是我发现在 iFrame 中禁用滚动操作的唯一方法。当您删除事件监听器时，您将无法在 iFrame 中滚动，并且此解决方法仅适用于桌面。
见 https://github.com/flutter/flutter/issues/78216了解更多信息。