滾動動畫無法在移動設備上像桌面滾動一樣工作。

Question

這是我第一次創建滾動動畫。 在到達元素后，我使用documentsize變量和scrollTop（）更改了該元素的類以產生效果。 它在桌面上完美運行，但在移動設備上僅第一個元素有效，而其他元素可能不是scrollTop（）在桌面和移動設備上的計算方式不同，因此我需要使用條件為桌面和移動應用不同的代碼。 我不確定這就是為什么我在這里問是否只有這種方式的原因。

謝謝。

 var documentsize = $(document),
  firstelement = $('.firstelement'),
  firstelementtime = 200,
  secondelement = $('.secondelement'),
  secondelementtime = 1400;


  documentsize.on('scroll',function(){

     if(documentsize.scrollTop() > firstelementtime){

         $('.firstelement').removeClass('myanimation');
         $('.firstelement').addClass('fadeInLeft');
     }


     if(documentsize.scrollTop() > secondelementtime){

         $('.secondelement').removeClass('myanimation');
         $('.secondelement').addClass('fadeInRight');
     }












     if(documentsize.scrollTop() < firstelementtime){

         $('.firstelement').removeClass('fadeInLeft');

           setTimeout(function(){

             $('.firstelement').addClass('myanimation');

           },500);
     }         



    if(documentsize.scrollTop() < secondelementtime){

         $('.secondelement').removeClass('fadeInRight');

           setTimeout(function(){

             $('.secondelement').addClass('myanimation');

           },500);
     }  

  });

Answer 1

如果您擔心在台式機和PC中計算不同的值，最好使用$(element).offset()根據父元素或純javascript element.offsetTop.獲取頂部和左側的值element.offsetTop. 之后，您可以使用$(parent).scroll()向下滾動從偏移量獲得的像素值。