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

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());
                            });






                        });
1个回答

11
我也遇到了这个问题,我认为这是Safari的一个bug。 我怀疑发生的情况是:在滚动过程中改变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


Skrollr在Safari上也存在问题。此外,@rodneyrehm制作了一个iOS7 bugfill来帮助获取正确的视口数字。 - tomByrer
我也遇到了同样的问题,而且在所有浏览器上都出现了……这是怎么回事? - rafaelmorais

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接