Javascript 滚动事件侦听器在iFrame中的iOS上不工作_Javascript_Jquery_Html_Ios_Iframe

Javascript 滚动事件侦听器在iFrame中的iOS上不工作

javascript jquery html ios iframe

Javascript 滚动事件侦听器在iFrame中的iOS上不工作,javascript,jquery,html,ios,iframe,Javascript,Jquery,Html,Ios,Iframe,我需要认真的帮助。我已经使用滚动事件监听器编程了一个站点，根据用户滚动的深度来设置一些图形的动画在桌面和iOS上运行良好。唯一的问题是这个站点需要嵌入到iFrame中。仍然可以在桌面上使用，但不能在iOS中使用我已经举了一个例子来说明我的意思。首先在桌面上查看此页面，然后在iOS上查看。固定元素（Scroll o meter）在iOS中是不固定的，我没有机会在这里获得scrollTop 主页（我没有机会在这里修改iframe属性）指数 html，正文{ 溢出y：自动； }

我需要认真的帮助。我已经使用滚动事件监听器编程了一个站点，根据用户滚动的深度来设置一些图形的动画

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

我已经举了一个例子来说明我的意思。

首先在桌面上查看此页面，然后在iOS上查看。

固定元素（Scroll o meter）在iOS中是不固定的，我没有机会在这里获得scrollTop

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


指数
html，正文{
溢出y：自动；
}

Iframe内容

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


指数
html，正文{
溢出y：自动；
边际：0px；
填充：0px；
}
.div1、.div2{
边际：0px；
填充：0px；
高度：700px；
边际：0px；
位置：相对位置；
宽度：100%；
}
.1分部{
背景：绿色；
}
.第2分部{
背景：橙色；
最高：100%；
}
#滚动指示器{
颜色：#fff；
位置：固定；
右：20px；
顶部：20px；
z指数：1000；
宽度：150px；
高度：25px；
}
内容1
内容2
滚动o米：0
$（窗口）。滚动（函数（）{
$（“#scrollindicator”）.html（“滚动o米：”+$（窗口）.scrollTop（））；
});

什么都试过了。无法使滚动处理程序在iOS上工作。有什么想法吗？

我知道你最终放弃了iFrame，但我今天发现这个问题时遇到了类似的问题。我试图检测用户何时从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);
}

它不是完美的，但它可以工作——当用户向下滑动页面并将其添加到总数时，它会获得触摸事件的Y位置。如果这个人刷得很快，并且当他们到达底部时根本不触摸屏幕，那么它就失败了。不过，这对我的情况有效

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

this（）可能会有帮助。谢谢，触发了touchmove事件，但scrollTop仍然为0。@ChristophHeike您找到解决方案或解决方法了吗？我也面临同样的问题。@DenisGolomazov不幸没有。@Christopheike我也没有：-（我尝试了几个滚动库，但最后我们不得不停止使用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);
}