在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上的滾動淡入淡出

回答

相關問題