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发布您的问题，我会更频繁地查看。：）

希望这会有所帮助问候，
Ĵ

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

1 个答案: