我使用ScrollMagic和Greensock，但它卡住滾動

Question

我使用ScrollMagic和Greensock創建一個「scroll to」功能，其中用戶點擊持久導航中的鏈接，然後視圖滾動到指定的在頁面上部分（長滿頁面的內容和圖像）。但在Safari（v 7.0.1）中，大約有80％的時間可以滾動，剩下的時間，它會一直停留在滾動到選定的部分。它甚至看起來並沒有停留在頁面的一些重要部分，它只是被掛在頁面的看似隨意的塊之間。

頁面上的內容是保密的，所以我不能共享整個頁面，但我可以分享推動它的腳本。我是否在腳本中做了任何錯誤的操作，導致它在卷軸上中斷？

$(document).ready(function($) { 
          // build tween 
          var tween1 = new TimelineMax() 
           .add([ 
            TweenMax.fromTo("#trigger1 .image1", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger1 .image2", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -560, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger1 .image3", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger1 .image6", 1, {scale: 1, autoAlpha: 1, top: 1200}, {top: -1630, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger1 .image4", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -560, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger1 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone}) 
           ]); 

          // build scene 
          var scene1 = new ScrollScene({triggerElement: "#point1", duration: $(window).height()}) 
              .setTween(tween1) 
              .addTo(controller); 

          // show indicators (requires debug extension) 
          //scene.addIndicators(); 






          //Processing 

          var tween2 = new TimelineMax() 
           .add([ 
            TweenMax.fromTo("#trigger2 .image1", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -1330, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger2 .image4", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -440, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger2 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone}) 
           ]); 

          // build scene 
          var scene2 = new ScrollScene({triggerElement: "#point2", duration: $(window).height()}) 
              .setTween(tween2) 
              .addTo(controller); 







          //Imaging 
          var tween3 = new TimelineMax() 
           .add([ 
            TweenMax.fromTo("#trigger3 .image3", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -950, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger3 .image4", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -960, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger3 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone}) 
           ]); 

          // build scene 
          var scene3 = new ScrollScene({triggerElement: "#point3", duration: $(window).height()}) 
              .setTween(tween3) 
              .addTo(controller); 






          //Advanced Imaging 

          var tween4 = new TimelineMax() 
           .add([ 
            TweenMax.fromTo("#trigger4 .image1", 1, {scale: 1, autoAlpha: 1, top: 1100}, {top: -1150, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger4 .image2", 1, {scale: 1, autoAlpha: 1, top: 1300}, {top: -890, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger4 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone}) 
           ]); 

          // build scene 
          var scene4 = new ScrollScene({triggerElement: "#point4", duration: $(window).height()}) 
              .setTween(tween4) 
              .addTo(controller); 






          //Reservoir Services 



          var tween5 = new TimelineMax() 
           .add([ 
            TweenMax.fromTo("#trigger5 .image1", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -900, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger5 .image2", 1, {scale: 1, autoAlpha: 1, top: 1100}, {top: -340, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger5 .image3", 1, {scale: 1, autoAlpha: 1, top: 1000}, {top: -240, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger5 .image4", 1, {scale: 1, autoAlpha: 1, top: 900}, {top: -140, ease: Linear.easeNone}), 
            TweenMax.fromTo("#trigger5 .image5", 1, {scale: 1, autoAlpha: 0.3, top: 1200}, {top: -1600, ease: Linear.easeNone}) 
           ]); 

          // build scene 
          var scene5 = new ScrollScene({triggerElement: "#point5", duration: $(window).height()}) 
              .setTween(tween5) 
              .addTo(controller); 







          //Resize fixer 

          $(window).on("resize", function() { 
           // update duration. 
           scene1.duration($(window).innerHeight()); 
           scene2.duration($(window).innerHeight()); 
           scene3.duration($(window).innerHeight()); 
           scene4.duration($(window).innerHeight()); 
           scene5.duration($(window).innerHeight()); 
          }); 






         }); 

Answer 1

我偶然發現了這個問題，我認爲這是Safari中的一個錯誤。
我懷疑會發生的情況是：在滾動過程中更改DOM大小的動畫會向瀏覽器觸發滾動事件，因爲它會更改滾動條內的關係。
這反過來使得程序化的滾動停止，因爲它被設計成在滾動動畫期間用戶滾動後自動取消。
想象一下從上到下的10秒滾動，你無法取消它。這僅僅是糟糕的用戶體驗，這就是它取消的原因。

但爲了讓Safari停止滾動沒有任何明顯的原因，唯一的解決辦法是強制TweenMax不取消滾動動畫。
使用此代碼：

TweenLite.to(window, 1, {scrollTo:{y:300, autoKill:false}}); 

你可以閱讀更多關於它：
http://forums.greensock.com/topic/7205-scrollto-bug-in-182-in-safari-602-mountain-lion

我認爲這個解決方案是正確的，只要所有的，你讓你的滾動動畫很短。

編輯：另一種解決方案可能會使用這樣的：
http://www.bytemuse.com/scrollIt.js/

而且下一次隨意張貼在ScrollMagic github issues section你的問題，我會更加頻繁檢測。 :)

希望這有助於。
問候，
Ĵ