当前位置：首页 > JavaScript

js 实现滚屏

2026-04-07 01:04:49JavaScript

实现滚屏的基本方法

在JavaScript中实现滚屏效果可以通过多种方式完成，以下是几种常见的方法：

使用window.scrollTo()方法
window.scrollTo(x, y)可以将页面滚动到指定坐标位置。例如，滚动到页面顶部：

window.scrollTo(0, 0);

使用window.scrollBy()方法
window.scrollBy(x, y)可以相对当前滚动位置进行滚动。例如，每次向下滚动100像素：

window.scrollBy(0, 100);

平滑滚动效果

为了实现平滑滚动效果，可以使用scrollTo或scrollBy的配置参数：

window.scrollTo({
  top: 1000,
  behavior: 'smooth'
});

或者使用CSS的scroll-behavior属性：

html {
  scroll-behavior: smooth;
}

滚动到特定元素

使用Element.scrollIntoView()方法可以将指定元素滚动到视口中：

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

自定义动画滚动

通过requestAnimationFrame实现自定义滚动动画：

function smoothScrollTo(targetY, duration = 1000) {
  const startY = window.pageYOffset;
  const distance = targetY - startY;
  let startTime = null;

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

  requestAnimationFrame(animation);
}

监听滚动事件

监听页面滚动事件可以实现更复杂的交互效果：

window.addEventListener('scroll', function() {
  const scrollPosition = window.pageYOffset;
  console.log('当前滚动位置:', scrollPosition);
});

无限滚动加载

结合AJAX实现无限滚动加载内容：

js 实现滚屏

window.addEventListener('scroll', function() {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
    // 加载更多内容
    loadMoreContent();
  }
});