当前位置：首页 > JavaScript

js实现滑动

2026-04-03 21:54:10JavaScript

实现滑动效果的JavaScript方法

使用CSS的`scroll-behavior`属性

在CSS中设置scroll-behavior: smooth可以实现平滑滚动效果，无需JavaScript。但需要配合锚点或JavaScript触发滚动。

html {
  scroll-behavior: smooth;
}

使用`window.scrollTo()`

window.scrollTo()方法可以滚动到指定位置，可以添加平滑效果。

// 平滑滚动到顶部
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

// 平滑滚动到指定元素
document.getElementById('section').scrollIntoView({
  behavior: 'smooth'
});

使用`Element.scrollIntoView()`

scrollIntoView()方法可以让元素滚动到可视区域。

js实现滑动

const element = document.getElementById('target');
element.scrollIntoView({ behavior: 'smooth' });

使用`requestAnimationFrame`自定义动画

如果需要更复杂的滑动效果，可以使用requestAnimationFrame自定义动画。

function smoothScrollTo(target, duration) {
  const start = window.pageYOffset;
  const distance = target - start;
  let startTime = null;

  function animation(currentTime) {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);
    window.scrollTo(0, start + distance * progress);
    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  requestAnimationFrame(animation);
}

// 使用示例
smoothScrollTo(500, 1000); // 滚动到500px位置，耗时1秒

使用第三方库

如果需要更复杂的滑动效果，可以考虑使用第三方库，如：

js实现滑动

横向滑动实现

横向滑动可以通过修改scrollLeft属性实现。

// 平滑横向滚动
const container = document.getElementById('horizontal-container');
container.scrollTo({
  left: 500,
  behavior: 'smooth'
});

触摸滑动支持

对于移动端触摸滑动，可以监听touchstart、touchmove和touchend事件。

let startX, startY;

element.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

element.addEventListener('touchmove', (e) => {
  const moveX = e.touches[0].clientX - startX;
  const moveY = e.touches[0].clientY - startY;

  // 横向滑动
  if (Math.abs(moveX) > Math.abs(moveY)) {
    e.preventDefault();
    element.scrollLeft -= moveX;
  }
});