自定义滚动条中用matches校验事件目标是否为合法滑块轨道，需精准匹配'.scrollbar-track'等明确选择器，避免泛化；在pointerdown中判断target.matches('.scrollbar-track')以触发轨道逻辑，并注意shadow dom、事件委托、文本节点及动态class等场景的适配。
在自定义滚动条组件中，用 matches 判断触发源是否为合法的滑块轨道，核心是通过事件目标（event.target）匹配预设的 CSS 选择器，确认它属于轨道（track）结构的一部分，而非滑块（thumb）、容器或外部元素。
明确合法轨道的 DOM 结构和选择器
合法的滑块轨道通常指包裹滑块的可点击/拖拽区域，例如：
<div class="scrollbar-track"><div class="scrollbar-thumb"></div></div>- 或使用伪元素模拟时，实际 DOM 中可能只有
.scrollbar-track容器，滑块由 JS 控制位置
因此，合法轨道的选择器应精准指向该容器，如 '.scrollbar-track' 或更严格的 '.scrollbar-track:not(.scrollbar-thumb)'（避免误判子元素）。不建议用泛化选择器如 'div' 或 '[class*="track"]'，易产生误匹配。
在事件监听中用 matches 做源头校验
在 mousedown / pointerdown 等事件回调中，对 event.target 调用 matches：
element.addEventListener('pointerdown', (e) => {
if (e.target.matches('.scrollbar-track')) {
// 合法轨道点击：开始拖拽逻辑、计算偏移等
handleTrackClick(e);
} else if (e.target.matches('.scrollbar-thumb')) {
// 滑块本身被拖：启用拖拽模式
startThumbDrag(e);
} else {
// 忽略其他区域（如外层容器、文字、空白）
return;
}
});
注意 Shadow DOM 和事件委托场景
若组件使用 Shadow DOM 或需支持事件委托（如监听父容器），需额外处理：
- Shadow DOM 内：确保
matches在 shadow root 下执行，或使用event.composedPath()[0]获取穿透后的真正目标 - 事件委托时：遍历
composedPath()中的每个节点，用node.matches('.scrollbar-track')查找首个匹配项，避免只检查event.target（它可能是子元素）
规避常见误判
以下情况容易导致 matches 返回意外结果，需提前防御：
-
event.target是文本节点（nodeType === 3）：先event.target.parentElement再匹配 - 动态添加/移除 class：确保匹配前 DOM 已就绪，避免因 class 还未生效导致判断失败
- 多个滚动条共存：选择器需带命名空间，如
'.my-scrollbar .scrollbar-track'，防止跨组件干扰
