2

I need serious help. I've programmed a site using a scroll event listener to animate some graphics, depending on how deep the user has scrolled.

Works fine on desktop and iOS. Only problem is that this site needs to be embedded in an iFrame. Still works on desktop, but not in iOS.

I've set up an example to show illustrate what I mean.

Look at this page first on desktop, then on iOS. http://www.webzeile.com/iframescroll/index.html

Fixed element (Scroll o meter) is not fixed in iOS and I have no chance to get the scrollTop here.

Main page (I have no chance to modify the iframe attributes here)

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

Iframe content

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

Tried everything. Can't get Scroll handler working on iOS. Any ideas?

7
  • This( stackoverflow.com/questions/18753367/… ) may help. Jan 25, 2015 at 11:52
  • Thanks, touchmove event is triggered, but scrollTop is still 0.
    – Christoph
    Jan 25, 2015 at 12:08
  • @ChristophHeike have you found a solution or workaround? I'm facing the same problem. Oct 13, 2015 at 20:06
  • @DenisGolomazov unfortunately not.
    – Christoph
    Oct 17, 2015 at 10:52
  • @ChristophHeike neither have I :-( I tried several scrolling libraries, but finally we had to stop using iframes. Oct 17, 2015 at 12:16

1 Answer 1

1

I see that you ended up giving up on IFrames, but I found this question today while having a similar problem. I was trying to detect when the user had scrolled to the bottom of the page from inside the IFrame on a different domain than the main page. Here's the solution I came up with:

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);
}

It's not perfect, but it works - it gets the Y position of the touch event as the user swipes down the page and adds it to the totalY. It fails if the person swipes very rapidly and doesn't touch the screen at all when they reach the bottom. It works for my case, however.

I hope this can help someone else looking at a similar problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.