在JavaScript中同时平滑地滚动X和Y轴可以通过多种方法实现,其中一种常见的方法是使用window.scrollTo
函数结合requestAnimationFrame
来实现平滑滚动效果。以下是一个示例代码:
以下是一个使用requestAnimationFrame
实现平滑滚动的示例:
function smoothScrollTo(x, y, duration) {
const startX = window.scrollX;
const startY = window.scrollY;
const distanceX = x - startX;
const distanceY = y - startY;
let startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime - startTime;
const run = ease(timeElapsed, startX, distanceX, duration);
const rise = ease(timeElapsed, startY, distanceY, duration);
window.scrollTo(run, rise);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
// 使用示例
smoothScrollTo(500, 300, 1000); // 滚动到X=500, Y=300的位置,持续时间为1000毫秒
requestAnimationFrame
来递归调用自身,直到达到指定的持续时间。ease
函数实现了缓动效果,使滚动更加自然。通过这种方式,可以在JavaScript中实现平滑的X和Y轴滚动效果,提升用户体验。
领取专属 10元无门槛券
手把手带您无忧上云