This is my first question on this platform, so I hope for some gentle feedback.
I am currently working on a basic flutter web application that I want to embed in an existing webpage. The app is hosted on firebase, and I have used an iFrame on the parent page to display the flutter app. You can see an image of the setup below.
The issue I am facing is that whenever the pointer hovers over the iframe, the flutter app seems to capture all scroll/wheel events, even if there is no scrollable content within the app. I have tried various solutions such as using JavaScript scripts, adjusting iframe attributes, and modifying CSS styles, but nothing has worked so far. Additionally, I am unable to use jQuery on the parent page.
Below is the code snippet I have attempted on the parent webpage. Unfortunately, the console log events do not seem to be triggered (at least when using Chrome Dev Tools), so I have yet to try passing the wheel event to the parent element.
<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>