自定义滚动条交互演示 - 模拟滚动事件处理

scroll事件在元素或页面的滚动位置发生变化时触发。触发频率取决于滚动方式：

• 鼠标滚轮：每次滚轮"咔嗒"触发一次，通常约100-200ms间隔
• 触控板/触摸屏：惯性滚动时频率极高，可达每16ms一次（60fps）
• 拖拽滚动条：随拖拽连续触发，频率接近帧率
• 编程滚动（scrollTo）：平滑滚动期间持续触发，瞬时滚动触发一次

高频触发是性能优化的关键原因——每秒可触发60+次，如果事件处理器中有DOM操作或重计算，会导致明显的性能问题。

记忆技巧：防抖像电梯——等人进完了才关门；节流像地铁闸机——固定间隔放行一人。

判断滚动方向：比较当前scrollTop与上一次的scrollTop值：

let lastScrollTop = 0;
element.addEventListener('scroll', () => {
    const st = element.scrollTop;
    const direction = st > lastScrollTop ? '向下' : '向上';
    lastScrollTop = st;
});

检测触底：

const isAtBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 5;
// 5px的容差用于处理浮点数精度

触顶检测更简单：element.scrollTop <= 0

WebKit浏览器（Chrome/Edge/Safari）：使用::-webkit-scrollbar系列伪元素。

Firefox：使用scrollbar-width和scrollbar-color属性。

/* WebKit */
.container::-webkit-scrollbar { width: 8px; }
.container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.container::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
.container::-webkit-scrollbar-thumb:hover { background: #555; }
/* Firefox */
.container { scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; }

本工具提供了4种预设主题，您可以在上方切换体验不同风格。

passive: true选项告诉浏览器事件处理器不会调用preventDefault()，从而允许浏览器在事件处理完成前就开始滚动，显著提升滚动流畅度。

element.addEventListener('scroll', handler, { passive: true });

注意：scroll事件本身不会取消滚动（与touchstart/wheel不同），但声明passive仍有助于浏览器的优化调度。移动端尤其推荐！

• scrollTo(x, y) — 滚动到绝对坐标位置
• scrollBy(x, y) — 相对当前位置滚动偏移量
• scrollIntoView() — 滚动直到元素可见，自动计算位置

三者都支持behavior: 'smooth'实现平滑滚动。本工具使用scrollTo进行编程式滚动演示。