스크롤 이벤트 리스너가 iFrame의 iOS에서 작동하지 않습니다.

심각한 도움이 필요합니다. 사용자가 스크롤 한 깊이에 따라 일부 그래픽에 애니메이션을 적용하기 위해 스크롤 이벤트 수신기를 사용하여 사이트를 프로그래밍했습니다.스크롤 이벤트 리스너가 iFrame의 iOS에서 작동하지 않습니다.

데스크톱 및 iOS에서 잘 작동합니다. 이 사이트를 iFrame에 삽입해야하는 경우에만 문제가 발생합니다. 데스크톱에서는 계속 작동하지만 iOS에서는 작동하지 않습니다.

나는 무슨 뜻인지 설명하기 위해 예제를 설정했습니다.

데스크톱에서이 페이지를 먼저 본 다음 iOS에서 봅니다. http://www.webzeile.com/iframescroll/index.html

고정 요소 (스크롤 오 미터) 아이폰 OS에 고정되지 않고, 나는 여기에 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>

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>

시도 다. iOS에서 스크롤 핸들러를 사용할 수 없습니다. 어떤 아이디어?

출처

2015-01-25 Christoph Heike

This (http://stackoverflow.com/questions/18753367/jquery-live-scroll-event-on-mobile-work-around)가 도움이 될 수 있습니다. –

감사합니다. touchmove 이벤트가 발생했지만 scrollTop은 여전히 0입니다. –

@ChristophHeike 해결책이나 해결 방법을 찾았습니까? 나는 똑같은 문제에 직면 해있다. –

나는 당신이 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); 
}

,하지만 그것을 작동합니다 - 사용자가 페이지를 아래로 스 와이프하고 totalY에 추가로 터치 이벤트의 Y 위치를 가져옵니다. 사람이 매우 빠르게 스 와이프하고 맨 아래에 도달했을 때 화면을 전혀 건드리지 않으면 실패합니다. 그러나 제 경우에는 효과가 있습니다.

다른 사람들이 비슷한 문제를 겪는 데 도움이되기를 바랍니다.

출처

2016-02-12 23:06:40 Jake

스크롤 이벤트 리스너가 iFrame의 iOS에서 작동하지 않습니다.

답변

관련 문제