关于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>
最佳答案
我尝试了很多方法来禁用父网页上有关 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了解更多信息。
关于javascript - 如何禁用嵌入式 Flutter Web 应用的滚动操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61363075/