js实现内容滚动

使用JavaScript实现内容滚动

使用scrollTo方法平滑滚动

通过window.scrollTo方法可以实现页面滚动到指定位置，结合behavior: 'smooth'可实现平滑滚动效果。

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

使用scrollIntoView滚动到元素

DOM元素的scrollIntoView方法可将元素滚动到视口中，支持平滑滚动选项。

document.getElementById('target-element').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});

自定义动画实现平滑滚动

通过requestAnimationFrame实现自定义滚动动画，控制滚动过程。

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

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

  requestAnimationFrame(animation);
}

监听滚动事件

通过添加滚动事件监听器，可以在滚动过程中执行特定操作。

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

滚动到顶部/底部

实现快速滚动到页面顶部或底部的功能。

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

// 滚动到底部
function scrollToBottom() {
  window.scrollTo({ 
    top: document.body.scrollHeight, 
    behavior: 'smooth' 
  });
}

横向滚动控制

对于水平滚动容器，可以使用类似的原理控制横向滚动。

const container = document.querySelector('.horizontal-scroll');
container.scrollTo({
  left: 300,
  behavior: 'smooth'
});

滚动位置恢复

在SPA应用中，可能需要保存和恢复滚动位置。

// 保存滚动位置
const scrollPos = window.pageYOffset;

// 恢复滚动位置
window.scrollTo(0, scrollPos);

使用CSS实现平滑滚动

在CSS中设置scroll-behavior属性可启用全局平滑滚动效果。

html {
  scroll-behavior: smooth;
}

注意事项

• 平滑滚动性能可能受页面复杂度和滚动距离影响
• 移动端设备可能有不同的滚动行为
• 某些浏览器可能需要polyfill支持平滑滚动