Я пытаюсь запретить пользователю прокручивать, если они касаются iframe. Поэтому, если они касаются тела, они могут прокручиваться.
Интересно, почему ниже код работает отлично в Mobile Chrome, но не работает в Mobile Safari. Любой способ исправить это для сафари?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.overflowHidden {
position:relative;
overflow-y:hidden;
}
.overflowAuto {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
</style>
</head>
<body>
<section>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<iframe id="appSimulator" style="background: #000000;" width="189px" height="400px" frameborder="0" scrolling="no"></iframe>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
</section>
<script type="text/javascript">
document.body.addEventListener('touchstart', function(){
document.body.style.overflow="auto";
$('body').removeClass('overflowHidden');
$('body').addClass('overflowAuto');
}, false)
document.body.addEventListener('touchend', function(){
document.body.style.overflow="hidden";
$('body').removeClass('overflowAuto');
$('body').addClass('overflowHidden');
}, false)
</script>
</body>
</html>
РЕДАКТИРОВАТЬ
Пример для мобильного Chrome - это то, что я хочу в Safari mobile
Благодарю.
EDIT 2
Спасибо за помощь от муэки.
Вот текущий результат от Safari Mobile
Текущий код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
-webkit-overflow-scrolling: touch;
}
.iframeContainer, iframe {
width: 189px;
height: 405px;
}
.iframeContainer {
overflow: auto;
}
</style>
</head>
<body>
<section>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<div class="iframeContainer">
<iframe id="appSimulator" src="https://appetize.io/embed/keyyyyyyy?device=iphone5s&scale=50&autoplay=false&orientation=portrait&deviceColor=black&language=zh-Hant" frameborder="0" scrolling="no"></iframe>
</div>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
</section>
</body>
</html>
если я установил .iframeContainer { overflow: hidden; }
.iframeContainer { overflow: hidden; }