提问人：Gaurav Raj 提问时间：1/19/2023 最后编辑：starballGaurav Raj 更新时间：1/28/2023 访问量：132
FLUTTER Web [违规] 为滚动阻塞“wheel”事件添加了非被动事件监听器
FLUTTER Web [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event
问：
我正在尝试在网站和颤动 Web 应用程序中实现滚轮/拖动滚动。
重现问题的步骤。 创建一个网站并在 Iframe 中打开 flutter webapp。
<html lang="en">
W3.CSS Template
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">HOME</a>
<a href="#band" class="w3-bar-item w3-button w3-padding-large w3-hide-small">BAND</a>
<a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">TOUR</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>
<div class="w3-dropdown-hover w3-hide-small">
<button class="w3-padding-large w3-button" title="More">MORE <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Merchandise</a>
<a href="#" class="w3-bar-item w3-button">Extras</a>
<a href="#" class="w3-bar-item w3-button">Media</a>
</div>
</div>
<a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-search"></i></a>
</div>
</div>
<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
<a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">BAND</a>
<a href="#tour" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">TOUR</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">CONTACT</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">MERCH</a>
</div>
<!-- The Contact Section -->
<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">
<h2 class="w3-wide w3-center">CONTACT</h2>
<p class="w3-opacity w3-center"><i>Fan? Drop a note!</i></p>
<div class="w3-row w3-padding-32">
<div class="w3-col m6 w3-large w3-margin-bottom">
<i class="fa fa-map-marker" style="width:30px"></i> Chicago, US<br>
<i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515<br>
<i class="fa fa-envelope" style="width:30px"> </i> Email: [email protected]<br>
</div>
<div class="w3-col m6">
<form action="/action_page.php">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name" required="" name="Name">
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Email" required="" name="Email">
</div>
</div>
<input class="w3-input w3-border" type="text" placeholder="Message" required="" name="Message">
<button class="w3-button w3-black w3-section w3-right" type="submit">SEND</button>
</form>
</div>
</div>
</div>
<!-- Page content -->
<!-- flutter web app code -->
<div>
<iframe id= "flutter_webapp_iframe" style="height:100%; width:100%; overflow:scroll ;" src="http://127.0.0.1:5500/#/" scrolling="yes"></iframe>
</div>
<!-- End Page Content -->
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
<p class="w3-medium">Powered by <a href="https://www.w3schools.com/w3css/default.asp">w3.css</a></p>
</footer>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
在本地运行它 当我们尝试从 Flutter 应用程序时，滚轮/TouchStart/拖动滚动不起作用。
默认情况下，Flutter webapp 不对 flt-glass-pane 元素提供 wheel/touchstart 支持。它是我们执行 main.dart.js 时的根元素
我希望你明白这个问题。寻找 forword 以解决它。
当 wheel listener passive 为 true 或 wheel listener 被移除时，它将开始滚动
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
// window.addEventListener('wheel', handle, {passive: true});
return appRunner.runApp();
}).then(
function(appRunner){
const pane = window.document.querySelector('flt-glass-pane')
pane.addEventListener("wheel",(e)=>{e.isTrusted;}, {passive: true});
// pane.removeEventListener('wheel', (e)=>{e.defaultPrevented;});
}
);
}, {passive: true});
</script>
它没有删除事件侦听器，但它在我尝试添加时加起来，但它是重复的。 因此，removeEventListener 应该有效，但事实并非如此。
如果您有其他方法可以在整个应用程序中实现滚动，或者有其他方法可以删除事件侦听器，请告诉我。
答： 暂无答案
评论