我正在使用 ScrollMagic 和 Greensock，但滚动时卡住了

Question

我正在使用ScrollMagic 和Greensock 创建一个“scroll to”功能，其中用户单击持久导航中的链接，然后视图将滚动到页面下方的指定部分（a长满内容和图像的页面）。但是在 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 中发布您的问题，我会更频繁地查看。 :)

希望这会有所帮助。
问候，
J