|
|
@@ -127,6 +127,7 @@ export default {
|
|
|
if (this.autoScan) this.startAutoScan();
|
|
|
this._setupWrapObserver();
|
|
|
this._setupWheelToHorizontal();
|
|
|
+ this._setupDragScroll();
|
|
|
});
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
@@ -136,6 +137,7 @@ export default {
|
|
|
this.$refs.scrollWrap.removeEventListener('wheel', this._wheelHandler);
|
|
|
this._wheelHandler = null;
|
|
|
}
|
|
|
+ if (this._dragCleanup) { this._dragCleanup(); this._dragCleanup = null; }
|
|
|
},
|
|
|
watch: {
|
|
|
currentTime() {
|
|
|
@@ -234,6 +236,31 @@ export default {
|
|
|
};
|
|
|
wrap.addEventListener('wheel', this._wheelHandler, { passive: false });
|
|
|
},
|
|
|
+ _setupDragScroll() {
|
|
|
+ const wrap = this.$refs.scrollWrap;
|
|
|
+ if (!wrap) return;
|
|
|
+ let startX = 0, scrollStart = 0, active = false, hasDragged = false;
|
|
|
+ const onDown = e => {
|
|
|
+ if (e.button !== 0) return;
|
|
|
+ active = true; hasDragged = false;
|
|
|
+ startX = e.clientX; scrollStart = wrap.scrollLeft;
|
|
|
+ };
|
|
|
+ const onMove = e => {
|
|
|
+ if (!active) return;
|
|
|
+ const dx = e.clientX - startX;
|
|
|
+ if (!hasDragged && Math.abs(dx) > 4) { hasDragged = true; wrap.classList.add('is-dragging'); }
|
|
|
+ if (hasDragged) wrap.scrollLeft = scrollStart - dx;
|
|
|
+ };
|
|
|
+ const onUp = () => { active = false; wrap.classList.remove('is-dragging'); };
|
|
|
+ wrap.addEventListener('mousedown', onDown);
|
|
|
+ window.addEventListener('mousemove', onMove);
|
|
|
+ window.addEventListener('mouseup', onUp);
|
|
|
+ this._dragCleanup = () => {
|
|
|
+ wrap.removeEventListener('mousedown', onDown);
|
|
|
+ window.removeEventListener('mousemove', onMove);
|
|
|
+ window.removeEventListener('mouseup', onUp);
|
|
|
+ };
|
|
|
+ },
|
|
|
// autoScan 时让扫描线跟着滚动条走: scan line 落到视口中心位置 (clamp 到合法 scrollLeft 范围)
|
|
|
// 不滚条 (contentWidthPx <= wrapW) 时直接 return
|
|
|
_followScanLine() {
|
|
|
@@ -623,27 +650,18 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-/* 外层视口: 提供原生横滚, 4 阶段以内不滚 (内容宽 == 视口宽) 也不预留滚条占位 */
|
|
|
+/* 外层视口: 提供原生横滚, 4 阶段以内不滚 (内容宽 == 视口宽); 拖拽滑动, 无滚动条 */
|
|
|
.chart-scroll {
|
|
|
width: 100%; height: 100%; flex: 1;
|
|
|
min-width: 0; min-height: 0;
|
|
|
overflow-x: auto; overflow-y: hidden;
|
|
|
- /* Firefox 常驻细条 */
|
|
|
- scrollbar-width: thin;
|
|
|
- scrollbar-color: rgba(161, 190, 255, 0.45) rgba(255, 255, 255, 0.04);
|
|
|
-}
|
|
|
-/* WebKit/Blink (Chrome/Edge/Electron) 常驻细条: 防 overlay scrollbar 隐身让用户以为不能滚 */
|
|
|
-.chart-scroll::-webkit-scrollbar { height: 6px; }
|
|
|
-.chart-scroll::-webkit-scrollbar-track {
|
|
|
- background: rgba(255, 255, 255, 0.04);
|
|
|
- border-radius: 3px;
|
|
|
-}
|
|
|
-.chart-scroll::-webkit-scrollbar-thumb {
|
|
|
- background: rgba(161, 190, 255, 0.45);
|
|
|
- border-radius: 3px;
|
|
|
+ scrollbar-width: none;
|
|
|
+ cursor: grab;
|
|
|
}
|
|
|
-.chart-scroll::-webkit-scrollbar-thumb:hover {
|
|
|
- background: rgba(161, 190, 255, 0.75);
|
|
|
+.chart-scroll::-webkit-scrollbar { display: none; }
|
|
|
+.chart-scroll.is-dragging {
|
|
|
+ cursor: grabbing;
|
|
|
+ user-select: none;
|
|
|
}
|
|
|
/* 内层 chart 容器: 默认 100%, 阶段>4 时 JS 命令式写 style.width (大于 wrap), 触发横滚 */
|
|
|
.chart-container {
|