| ... | ... | @@ -259,18 +259,27 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) { |
| 259 | 259 | |
| 260 | 260 | updateTurnStripScrollState(); |
| 261 | 261 | const onScroll = () => updateTurnStripScrollState(); |
| 262 | |
| 263 | const onWheel = (event: WheelEvent) => { |
| 264 | if (!element) return; |
| 265 | if (element.scrollWidth <= element.clientWidth + 1) return; |
| 266 | if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return; |
| 267 | event.preventDefault(); |
| 268 | element.scrollBy({ left: event.deltaY, behavior: "auto" }); |
| 269 | }; |
| 270 | |
| 262 | 271 | element.addEventListener("scroll", onScroll, { passive: true }); |
| 263 | | element.addEventListener("wheel", onTurnStripWheel, { passive: false }); |
| 272 | element.addEventListener("wheel", onWheel, { passive: false }); |
| 264 | 273 | |
| 265 | 274 | const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState()); |
| 266 | 275 | resizeObserver.observe(element); |
| 267 | 276 | |
| 268 | 277 | return () => { |
| 269 | 278 | element.removeEventListener("scroll", onScroll); |
| 270 | | element.removeEventListener("wheel", onTurnStripWheel); |
| 279 | element.removeEventListener("wheel", onWheel); |
| 271 | 280 | resizeObserver.disconnect(); |
| 272 | 281 | }; |
| 273 | | }, [onTurnStripWheel, updateTurnStripScrollState]); |
| 282 | }, [updateTurnStripScrollState]); |
| 274 | 283 | |
| 275 | 284 | useEffect(() => { |
| 276 | 285 | updateTurnStripScrollState(); |