我使用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你的问题，我会更加频繁检测。 :)

希望这有助于。
问候，
Ĵ