我正在使用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());
});
});