在 iFrame 中滚动事件侦听器在 iOS 上不起作用

Scroll event listener not working on iOS in iFrame

本文关键字：iOS 不起作用 侦听器 事件 iFrame 滚动      更新时间：2023-09-26

我需要认真的帮助。我已经使用滚动事件侦听器对一个网站进行了编程，以根据用户滚动的深度对某些图形进行动画处理。

在桌面和iOS上运行良好。唯一的问题是这个站点需要嵌入到iFrame中。仍然可以在桌面上使用，但在 iOS 中不起作用。

我

设置了一个示例来说明我的意思。

首先在桌面上查看此页面，然后在iOS上查看此页面。http://www.webzeile.com/iframescroll/index.html

固定

元素（滚动仪表）在iOS中不固定，我没有机会在这里获得scrollTop。

主页（我没有机会在这里修改 iframe 属性）

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

内嵌框架内容

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

尝试了一切。无法让滚动处理程序在 iOS 上运行。有什么想法吗？

我看到你最终放弃了 IFrames，但我今天在遇到类似问题时发现了这个问题。 我试图检测用户何时从 IFrame 内部滚动到页面底部，而不是主页。 这是我提出的解决方案：

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[0].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);
}

它并不完美，但它有效 - 当用户向下滑动页面并将其添加到 totalY 时，它会获取触摸事件的 Y 位置。 如果该人滑动非常快并且在到达底部时根本不触摸屏幕，则失败。 但是，它适用于我的情况。

我希望这可以帮助其他人研究类似的问题。

相关文章：