Come si anima FB.Canvas.scrollTo?

Question

Ho creato un'app di dimensioni fisse (circa 2.000 px di altezza) e un menu che richiama FB.Canvas.scrollTo per consentire all'utente di navigare nella pagina lunga.

C'è un modo per aggiungere un effetto di scorrimento uniforme? Facebook non offre alcuna soluzione sul suo blog degli sviluppatori.

Answer 1

Usando @ metodo di Jonny, si può fare di questo un po 'più semplice, con

function scrollTo(y){ 
    FB.Canvas.getPageInfo(function(pageInfo){ 
      $({y: pageInfo.scrollTop}).animate(
       {y: y}, 
       {duration: 1000, step: function(offset){ 
        FB.Canvas.scrollTo(0, offset); 
       } 
      }); 
    }); 
} 

Answer 2

Un modo per farlo è ottenere la posizione Y corrente, quindi ottenere la posizione Y. Esegui un ciclo for con un setTimeout che porterà l'utente alla posizione Y finale.

Answer 3

ho appena usato la tecnica Francesco ed implementato una versione jQuery

$('html,body').animate(
    {scrollTop: $(".scroll_to_me").offset().top}, 
    {duration: 1000, step: function(top_offset){ 
    FB.Canvas.scrollTo(0, top_offset + 30); 
    } 
}); 

È necessario sostituire il .scroll_to_me con il selettore che si desidera scorrere. Inoltre ho aggiunto nello + 30 allo scostamento in quanto l'iframe non si avvia nella parte superiore della pagina, potresti volerlo modificare.

Answer 4

Ho avuto lo stesso problema oggi - ho trovato un po 'di javascript che utilizza il metodo animate di jQuery che fornisce un po' di attenuazione - lo scroll è ancora un tocco a scatti (suppongo che sia a causa dell'FB. Canvas.scrollTo proxy). Comunque, ecco il frammento:

function scrollToTop() { 
    // We must call getPageInfo() async otherwise we will get stale data. 
    FB.Canvas.getPageInfo(function (pageInfo) { 

     // The scroll position of your app's iFrame. 
     var iFrameScrollY = pageInfo.scrollTop; 

     // The y position of the div you want to scroll up to. 
     var targetDivY = $('#targetDiv').position().top; 

     // Only scroll if the user has scrolled the window beneath the target y position. 
     if (iFrameScrollY > targetDivY) { 
      var animOptions = { 

       // This function will be invoked each 'tick' of the animation. 
       step: function() { 
        // As we don't have control over the Facebook iFrame we have to ask the Facebook JS API to 
        // perform the scroll for us. 
        FB.Canvas.scrollTo(0, this.y); 
       }, 

       // How long you want the animation to last in ms. 
       duration: 200 
      }; 

      // Here we are going to animate the 'y' property of the object from the 'iFrameScrollY' (the current 
      // scroll position) to the y position of your target div. 
      $({ y: iFrameScrollY }).animate({ y: targetDivY }, animOptions); 
     } 
    }); 
}