按功能与层级组织 · 同一组件提供多框架代码,复制即用
左右拖动分割线看改造前后。两层都是真 DOM,不是两张图拼的——所以右边那层照样能交互、能读屏。分割用 clip-path 而不是宽度,拖动时不触发重排;指针用 setPointerCapture 接管,手滑出容器也不会中断。滑块本身是 role="slider",方向键微调、Home/End 到两端,键盘用户不需要鼠标。
一次性扫过的高光,不是循环呼吸。按钮底色固定、只有高光色跟着参数走——这两件事分开,才不会出现「拖了半天整颗按钮变色、那道光纹丝不动」的假参数。扫动用 ::before 的位移实现,不额外挂 DOM 节点,也不干扰 :active 的按压反馈。