gpt4 book ai didi

iphone - 阻止 Mobile Safari 中

转载 作者:行者123 更新时间:2023-12-03 21:19:46 24 4
gpt4 key购买 nike

我正在 Mobile Safari 中编写一个带有视频元素的主屏幕 Web 应用程序。出于可用性原因,我希望在屏幕上滑动不会使页面滚动。我可以使用以下代码成功阻止滑动滚动。但是,如果用户在视频元素上滑动,页面就会滚动。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>no scroll</title>
<script type="text/javascript">
window.onload = function(){
document.addEventListener('touchmove',function(event){
event.preventDefault();
},false);
};
</script>
</head>
<body>
<p>anything but the video will be stationary when swiped.</p>
<video preload="auto" webkit-playsinline id="video" controls height="100" width="100">
<source src="video.mp4" type="video/mp4" />
</video>
</body>
</html>

我尝试添加代码以防止视频元素吞噬这些事件(插入到 window.onload 函数中):

var videoEl = document.getElementById('video');
videoEl.addEventListener('touchmove',function(event){
event.preventDefault();
},false);
videoEl.addEventListener('touchstart',function(event){
event.preventDefault();
},false);

有解决办法吗?我是否以错误的方式解决问题?

最佳答案

我建议在顶部放置一个垫片,即具有较高 z-index 的空白 div 来捕获触摸事件。我现在没有机会测试,但应该很容易尝试。

关于iphone - 阻止 Mobile Safari 中 <video> 元素中的 touchmove 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5970497/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com