Javascript touch event not working in Mobile Safari
Question
I am trying to restrict user to scroll if they touch on an iframe. So, if they touch on body, they can scroll.
Wondering why below code works fine in Mobile Chrome, but not working in Mobile Safari. Any way to fix this for 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>
EDIT
Example for Mobile Chrome - This is what I want in Safari mobile
Thanks.
EDIT 2
Thank you for the help from muecas.
Here is the current result from Safari Mobile
Current Code
<!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>
if I set .iframeContainer { overflow: hidden; } .iframeContainer { overflow: hidden; }
2 answers
solution1
7 ACCPTED 2018-05-21 15:29:27
The main problem with Safari iOS is that the iframe tag is treated as some sort of responsive element, and will act strange to its size, and contained element (loaded HTML) sizes. I tested using an iframe with real content, so it will be fully scrollable. Using the same code as in you example, Safari iOS showed the iframe with full height of the contained html content event with a width and height defined.
To solve the problem you need to include the iframe in a block container, and then set the block container size ( width and height ) and overflow to auto , and add the vendor attribute to the body to allow the iframe to be scrolled properly. Also, dont forget to set the iframe as scrollable.
You can discard the js implementation.
I tested this on every desktop browser, Safari iOS and Mobile Chrome.
You may also want to check this link when the responsive content inside an iframe is discussed.
Hope it helps.
Main html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
-webkit-overflow-scrolling: touch;
}
.iframeContainer, iframe {
width: 200px;
height: 200px;
}
.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" frameborder="0" src="scrolling.html" scrolling="yes"></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>
Loaded iframe :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
background-color: black;
color: white;
}
</style>
</head>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</body>
</html>
solution2
2 2018-05-15 06:49:35
It seems touch event works well but overflow is not.
I am not sure what your html looks like, however you can try these:
hidden:
body { /* position can be fixed */ position:relative; overflow-y:hidden; }auto:
body { -webkit-overflow-scrolling: touch; overflow: auto; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.