在iOS上的滚动淡入淡出

-1

jQuery淡入滚动不适用于iOS设备，但它适用于Windows，Mac和Android？我想这与iPhone捕获滚动事件的方式有所不同，但我如何解决这个问题，所以它可以在所有设备上工作，或者只是删除.hideme类上的div，如果它是在iPhone/iPad的？在iOS上的滚动淡入淡出

$(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:

来源

2017-09-25 Carsten Andersen

尝试没有 '每个' 事件。

$(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); 

     } 

    });

}）;

来源

2017-09-25 19:09:02

感谢您的建议，但不会在Windows上工作（havnt检查androind，mac或iOS与它虽然 - 但我敢打赌，将是相同的） https://jsfiddle.net/e5qaD/7431/ –

Soory。在$（'。hideme'）上更改$（this） –

https://jsfiddle.net/e5qaD/7432/ –

我从来没有找到一个好的解决方案，所以我删除了移动设备上的淡入淡出。

我改变了我的动画方式，并使用了AOS.js（AnimateOnScroll），它具有禁用移动设备和iPad设备上动画的功能。

来源

2017-09-26 16:14:31

在iOS上的滚动淡入淡出

回答

相关问题