js实现scrollview

实现 ScrollView 的基本结构

使用 HTML 和 CSS 创建一个基础容器，确保内容超出容器高度时出现滚动条。

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 长内容 -->
  </div>
</div>

.scroll-container {
  height: 300px;
  overflow-y: auto; /* 垂直滚动 */
  border: 1px solid #ddd;
}

监听滚动事件

通过 JavaScript 监听滚动事件，实现自定义逻辑（如无限滚动、滚动动画等）。

const scrollContainer = document.querySelector('.scroll-container');
scrollContainer.addEventListener('scroll', (event) => {
  const { scrollTop, scrollHeight, clientHeight } = event.target;
  console.log(`当前位置: ${scrollTop}, 总高度: ${scrollHeight}, 可视高度: ${clientHeight}`);
});

动态加载内容（无限滚动）

当滚动接近底部时，动态加载新内容。

scrollContainer.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
  if (scrollHeight - (scrollTop + clientHeight) < 50) {
    loadMoreContent(); // 自定义加载函数
  }
});

function loadMoreContent() {
  const newContent = document.createElement('div');
  newContent.textContent = '新加载的内容';
  document.querySelector('.scroll-content').appendChild(newContent);
}

平滑滚动到指定位置

使用 scrollTo 方法实现平滑滚动动画。

function smoothScrollTo(element, targetPosition, duration = 500) {
  const startPosition = element.scrollTop;
  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);
    element.scrollTop = startPosition + distance * progress;
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  requestAnimationFrame(animation);
}

// 使用示例
smoothScrollTo(scrollContainer, 200);

自定义滚动条样式

通过 CSS 修改滚动条外观（仅支持 WebKit 内核浏览器）。

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

使用第三方库（可选）

若需更复杂功能（如惯性滚动），可引入库如 SimpleBar 或 Perfect Scrollbar。

npm install simplebar

import SimpleBar from 'simplebar';
new SimpleBar(document.querySelector('.scroll-container'));

注意事项

• 移动端需考虑 touch 事件兼容性。
• 性能优化：避免在滚动事件中执行高耗操作，可使用 debounce 或 throttle。
• 跨浏览器测试：部分 CSS 滚动条样式仅限 WebKit 内核。