心是桃源，处处水云

1
@media (hover: none) and (pointer: coarse) {
2
  .float-panel {
3
    touch-action: manipulation;
4
  }
5
}

1
const enablePointerScroll = (container) => {
2
  let isDragging = false;
3
  let startY = 0;
4
  let startScrollTop = 0;
5
  let hasCapture = false;
6

7
  // 开始拖拽
8
  container.addEventListener("pointerdown", (e) => {
9
    // 只处理主键/触摸
10
    if (e.button !== undefined && e.button !== 0) return;
11

12
    isDragging = true;
13
    startY = e.clientY;
14
    startScrollTop = container.scrollTop;
15
    hasCapture = false;
16
  });
17

18
  // 拖拽中
19
  container.addEventListener("pointermove", (e) => {
20
    if (!isDragging) return;
21

22
    const dy = e.clientY - startY;
23

24
    // 移动超过 3px 才认为是滚动操作
25
    if (Math.abs(dy) > 3) {
26
      // 捕获指针，确保后续事件都发送到这个元素
27
      if (!hasCapture) {
28
        try {
29
          container.setPointerCapture(e.pointerId);
30
          hasCapture = true;
31
        } catch {}
32
      }
33

34
      // 手动控制滚动位置
35
      container.scrollTop = startScrollTop - dy;
36
      e.preventDefault();
37
    }
38
  });
39

40
  // 结束拖拽
41
  const endDrag = () => {
42
    isDragging = false;
43
    hasCapture = false;
44
  };
45

46
  container.addEventListener("pointerup", (e) => {
47
    if (hasCapture) {
48
      try {
49
        container.releasePointerCapture(e.pointerId);
50
      } catch {}
51
    }
52
    endDrag();
53
  });
54

55
  container.addEventListener("pointercancel", endDrag);
56
  container.addEventListener("lostpointercapture", endDrag);
57
};

1
onMount(() => {
2
  // ... 其他初始化代码
3

4
  setTimeout(() => {
5
    const lyrics = document.querySelector(".lyrics-scroll");
6
    const playlist = document.querySelector(".playlist-scroll");
7

8
    if (lyrics) enablePointerScroll(lyrics);
9
    if (playlist) enablePointerScroll(playlist);
10
  }, 100);
11
});

1
// 监听 showLyrics 变化
2
$: if (showLyrics) {
3
  setTimeout(() => {
4
    const lyrics = document.querySelector(".lyrics-scroll");
5
    if (lyrics) enablePointerScroll(lyrics);
6
  }, 50);
7
}
8

9
// 切换播放列表时
10
function togglePlaylist() {
11
  showPlaylist = !showPlaylist;
12
  if (showPlaylist) {
13
    setTimeout(() => {
14
      const playlist = document.querySelector(".playlist-scroll");
15
      if (playlist) enablePointerScroll(playlist);
16
    }, 50);
17
  }
18
}