我正在使用ScrollMagic和Greensock,但它会卡住滚动

Question

我正在使用ScrollMagic和Greensock创建一个" 滚动到 "功能,用户点击持久导航中的链接,然后将视图滚动到页面下方的指定部分(一个充满内容和图像的长页面) .但是在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问题部分发布您的问题,我会更频繁地检查.:)

希望这可以帮助.
问候,
J