javascript - 滚动事件监听器在 iFrame 中的 iOS 上不起作用
<p><p>我需要认真的帮助。
我使用滚动事件监听器编写了一个网站，根据用户滚动的深度为一些图形设置动画。</p>
<p>在桌面和 iOS 上运行良好。
唯一的问题是该站点需要嵌入到 iFrame 中。
仍然适用于桌面，但不适用于 iOS。</p>
<p><strong>我已经设置了一个示例来说明我的意思。</strong></p>
<p>首先在桌面上查看此页面，然后在 iOS 上查看。
<a href="http://www.webzeile.com/iframescroll/index.html" rel="noreferrer noopener nofollow">http://www.webzeile.com/iframescroll/index.html</a> </p>
<p>固定元素(滚动 o 米)在 iOS 中不固定，我没有机会在此处获得 <em>scrollTop</em>。</p>
<p><strong>主页(我这里没机会修改iframe属性)</strong></p>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<style type="text/css" media="screen">
html, body {
overflow-y:auto;
}
</style>
</head>
<body>
<div style="-webkit-overflow-scrolling: touch !important; overflow:auto; width:800px; height:500px; margin:0px auto;">
<iframe id="iframe" scrolling="auto" webkitallowfullscreen frameborder="0" style="width:100%; height:100%;" src="iframe.html"></iframe>
</div>
</code></pre>
<p>
</p>
<p><strong>iframe 内容</strong></p>
<pre><code> <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css" media="screen">
html, body {
overflow-y:auto;
margin:0px;
padding:0px;
}
.div1, .div2 {
margin:0px;
padding:0px;
height:700px;
margin:0px;
position:relative;
width:100%;
}
.div1 {
background:green;
}
.div2 {
background:orange;
top:100%;
}
#scrollindicator {
color:#fff;
position:fixed;
right:20px;
top:20px;
z-index:1000;
width:150px;
height:25px;
}
</style>
</head>
<body>
<div class="div1">
<h1>Content 1</h1>
</div>
<div class="div2">
<h1>Content 2</h1>
<a href="#" onclick="alert($(window).scrollTop()); return false;">Alert scroll top</a>
<a href="#" onclick="alert(window.pageYOffset); return false;">Alert Y offset</a>
</div>
<div id="scrollindicator">
Scroll o meter: 0
</div>
<script type="text/javascript">
$(window).scroll(function () {
$("#scrollindicator").html("Scroll o meter: "+$(window).scrollTop());
});
</script>
</body>
</html>
</code></pre>
<p>什么都试过了。无法让 Scroll 处理程序在 iOS 上运行。有什么想法吗？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我看到您最终放弃了 IFrame，但我今天在遇到类似问题时发现了这个问题。我试图检测用户何时从与主页不同域的 IFrame 内部滚动到页面底部。这是我想出的解决方案:</p>
<pre><code>var totalY = 0;
function scroll_handler(e){
var t = $(window).scrollTop();
var h = $(window).height();
var el = $('#bottomdiv');//This is an element at the bottom of the page
var bot = el.offset().top + (el.height()) - 400; //I wanted a 400px buffer
if (e.type == "touchend") {
totalY += e.originalEvent.changedTouches.clientY;
if ( !t ) {
t = totalY;
}
}
if ((t + h) >= bot) {
//Do Stuff when they get to the bottom of the page
}
}
if ( 'ontouchstart' in window ) {
$("body").on("touchend",scroll_handler);
} else {
$(window).scroll(scroll_handler);
}
</code></pre>
<p>它并不完美，但它可以工作 - 当用户向下滑动页面并将其添加到 totalY 时，它会获取触摸事件的 Y 位置。如果该人非常快速地滑动并且到达底部时根本不触摸屏幕，则它会失败。但是，它适用于我的情况。</p>
<p>我希望这可以帮助其他正在寻找类似问题的人。</p></p>
<p style="font-size: 20px;">关于javascript - 滚动事件监听器在 iFrame 中的 iOS 上不起作用，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/28135785/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/28135785/
</a>
</p>
页:
[1]