ScrollToPlugin 文档

优质
小牛编辑
136浏览
2023-12-01

TweenMax没有包含ScrollToPlugin。

此插件用于滚动窗口(类似于window.scrollTo(x, y))或DOM元素(如myDiv.scrollTop = y; myDiv.scrollLeft = x;)。滚动窗口时使用window作为动画目标。

动画关键词:scrollTo

//窗口滚动到400px
TweenLite.to(window, 2, {scrollTo:400});
//窗口滚动到锚点
TweenLite.to(window, 2, {scrollTo:"#someID"});
//div滚动到250px
TweenLite.to(myDiv, 2, {scrollTo:250});
//同时滚动X和Y方向
TweenLite.to(myDiv, 2, {scrollTo:{y:400, x:200}, ease:Power2.easeOut});
//滚动到锚点#someID上方50px
TweenMax.to(window, 2, {scrollTo:{y:"#someID", offsetY:50}});
//滚动到最下方
TweenLite.to(myDiv, 2, {scrollTo:{y:"max"}});
TweenLite.to(myDiv, 2, {scrollTo:"max"});

ScrollToPlugin自动终止

用户主动控制滚动时(例如拖动滚动条)插件默认会自动终止滚动。自动终止时会触发onAutoKill事件

TweenLite.to(window, 2, {scrollTo:{y:300, onAutoKill:myAutoKillFunction}});
function myAutoKillFunction() {
 alert("autoKill");
}

如果你不想滚动被打断,可以设置autoKill为false。

//关闭自动终止
TweenLite.to(myDiv, 2, {scrollTo:{y:400, autoKill:false}, ease:Power2.easeOut});