iOSスクロールのフェードイン

Question

jQueryフェードインのスクロールはiOSデバイスでは機能しませんが、ウィンドウ、Mac、アンドロイドで動作しますか？

スクロールイベントを別の方法でキャプチャしているiPhoneと関係がありますが、これを修正するにはどうすればすべてのデバイスで動作するのか、またはscolling divの.hidemeクラスをiPhone/iPadですか？

$(document).ready(function() { 
 
    
 
    /* Every time the window is scrolled ... */ 
 
    $(window).scroll(function(){ 
 
    
 
     /* Check the location of each desired element */ 
 
     $('.hideme').each(function(i){ 
 
      
 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
      
 
      /* If the object is completely visible in the window, fade it it */ 
 
      if(bottom_of_window > bottom_of_object){ 
 
       
 
       $(this).animate({'opacity':'1'},500); 
 
        
 
      } 
 
      
 
     }); 
 
    
 
    }); 
 
    
 
});

#container 
 
{ 
 
    height:2000px;  
 
} 
 

 
#container DIV 
 
{ 
 
    margin:50px; 
 
    padding:50px; 
 
    background-color:lightgreen; 
 
} 
 

 
.hideme 
 
{ 
 
    opacity:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    
 
    <div>Hello</div> 
 
    <div>Hello</div> 
 
    <div>Hello</div> 
 
    <div>Hello</div> 
 
    <div>Hello</div> 
 
    <div>Hello</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    
 
</div>

fiddle with same content as snippet above:

Answer 1

'はそれぞれ' イベントなしで試してみてください。

$(document).ready(function() {

/* Every time the window is scrolled ... */ 
$(window).scroll(function(e){ 

    /* Check the location of each desired element */ 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it it */ 
     if(bottom_of_window > bottom_of_object){ 

      $(this).animate({'opacity':'1'},500); 

     } 

    }); 

}）。

Answer 2

私は決して良い解決策を見つけられなかったので、モバイルデバイスのフェードを削除しました。

私は自分のやり方を変え、モバイルデバイスとipadデバイスでアニメーションを無効にする機能を持つAOS.js（AnimateOnScroll）を使用しました。