Question

jQuery fadeIn滚动不能在iOS设备上运行，但它可以在windows，mac和android上运行吗？

我猜这与iPhone捕捉滚动事件的方式有所不同，但我如何解决这个问题，所以它可以在所有设备上运行，或者只是在scolling div上删除.hideme类，如果它已经开启iPhone / iPad？

＆＃13;

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

＆＃13;

#container
{
    height:2000px;    
}

#container DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme
{
    opacity:0;
}

＆＃13;

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

＆＃13;

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

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

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

在iOS上滚动时淡入淡出

2 个答案: