3

我正在使用ScrollMagicGreensock创建一个“滚动到”功能,其中用户单击持久导航中的链接,然后视图滚动到页面下方的指定部分(一个长满内容和图像的页面) . 但是在 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());
                            });






                        });
4

1 回答 1

11

我也偶然发现了这个问题,我认为这是 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

于 2014-04-24T10:58:21.180 回答