当前位置：首页 > JavaScript

js实现滚动条效果

2026-02-28 18:52:20JavaScript

监听滚动事件

通过window.addEventListener监听scroll事件，可以获取当前滚动位置。window.pageYOffset或document.documentElement.scrollTop获取垂直滚动距离，window.pageXOffset获取水平滚动距离。

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

自定义滚动条样式

使用CSS伪元素::-webkit-scrollbar系列属性可修改浏览器默认滚动条样式（仅WebKit内核浏览器支持）：

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

平滑滚动实现

使用window.scrollTo()或Element.scrollIntoView()实现平滑滚动效果。现代浏览器支持behavior: 'smooth'参数：

// 页面顶部滚动到指定位置
window.scrollTo({
  top: 500,
  behavior: 'smooth'
});

// 元素滚动到视口内
document.getElementById('target').scrollIntoView({
  behavior: 'smooth'
});

自定义滚动条控件

当需要完全自定义滚动条时，可通过以下步骤实现：

创建外层容器设置overflow: hidden
添加内容容器和自定义滚动条DOM
通过JavaScript计算内容高度与可视区域比例
监听鼠标事件控制滚动位置

const container = document.querySelector('.custom-scroll-container');
const content = document.querySelector('.custom-content');
const scrollbar = document.querySelector('.custom-scrollbar-thumb');

// 计算滚动比例
const ratio = container.clientHeight / content.scrollHeight;

// 设置滚动条高度
scrollbar.style.height = `${ratio * 100}%`;

// 拖动滚动条实现滚动
scrollbar.addEventListener('mousedown', startDrag);

function startDrag(e) {
  // 实现拖动逻辑...
}

滚动动画优化

使用requestAnimationFrame实现高性能滚动动画，避免直接使用setTimeout或setInterval：

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

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

  function easeInOutQuad(t) {
    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  }

  requestAnimationFrame(animation);
}

滚动性能注意事项

避免在滚动事件中执行重布局操作，使用debounce或throttle优化事件处理频率。CSS属性will-change: transform可提升滚动性能：

function debounce(func, wait = 20) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait);
  };
}

window.addEventListener('scroll', debounce(handleScroll));

移动端触摸支持

对于移动设备，需要同时处理touchstart、touchmove和touchend事件来实现流畅的触摸滚动体验：

js实现滚动条效果

let startY;

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

element.addEventListener('touchmove', e => {
  const y = e.touches[0].clientY;
  const dy = startY - y;
  element.scrollTop += dy;
  startY = y;
});