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