防止

发布于 2024-11-06 13:10:07 字数 1372 浏览 0 评论 0原文

我正在 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);

是否有解决方法？我是否以错误的方式解决问题？

原文

I am writing a home-screen web app with a video element in Mobile Safari. For usability reasons, I would prefer that swiping on the screen does not make the page scroll. I can successfully prevent swipes from scrolling using the following code. However, if a user swipes on the video element, the page scrolls.

<!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>

I have tried adding code to prevent the video element from swallowing those events (inserted into the window.onload function):

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

Is there a workaround for this? Am I addressing the problem the wrong way?

分享到QQ

分享到微博