Carousel のマウスドラッグでスムーズなスナップアニメーションを実現

この PR は、ドラッグ中に scroll-snap-type を無効化していた CSS ルールを削除し、マウスアップ時にスムーズなスナップアニメーションが行われるようにした変更です。

背景

Issue #1103 では、mouse-dragging 属性を付与した <wa-carousel> がマウスボタンを離した瞬間に瞬時にスナップしてしまい、期待される滑らかなアニメーションが失われると報告されています。対象は macOS、Windows、Android、iPadOS など多様な OS と主要ブラウザです。

コンポーネントのドラッグ処理は carousel.ts の handleMouseDragStart/handleMouseDragEnd で実装されており、ドラッグ中は .slides-dragging または .slides-dropping クラスが付与され、CSS で scroll-snap-type: unset; が適用されていました。このスタイルはネイティブのスナップを抑制するために導入されました。

しかし同時に、ドラッグ終了後にコンポーネント側で実行する滑らかなスクロールアニメーションも抑制され、結果としてハードなジャンプが発生していました。

技術的な変更

削除された CSS ブロック

.slides-dragging,
.slides-dropping {
  scroll-snap-type: unset;
}

上述の 5 行が完全に除去され、他のスタイルには変更がありません。

この削除により、ドラッグ中でも scroll-snap-type の既定設定（ホスト側で定義されたスナップ規則）が維持されます。マウスボタンが離されたとき、コンポーネントの JavaScript がスムーズスクロールをトリガーし、ブラウザのネイティブスナップ機構が自然にアニメーションに参加するようになります。

クラスの付与だけでスナップを無効化する仕組みがなくなるため、スタイリング層がシンプルになり、ドラッグロジックはスクロール位置の計算に集中できるようになります。

設計判断

この修正は、追加の JavaScript ロジックを導入するよりも CSS レベルで根本的な競合を取り除く方針を示しています。スタイルを削除することで、「最小限の変更でユーザー体験を改善」という設計哲学が反映されています。

scroll-snap-type をドラッグ中に無効化していたことによるリスク（誤ってスナップが走る可能性）は、コンポーネントが独自にスクロールを制御しているため実質的に低減されています。結果として、全ての対象ブラウザで一貫した滑らかな復帰アニメーションが得られます。

スタイリングを簡素化したことは、保守性の向上とクロスブラウザ動作の統一という副次的効果ももたらし、広範なテストマトリックスで確認された通りの挙動を保証します。

まとめ

scroll-snap-type: unset; ルールを削除したことで、<wa-carousel> のマウスドラッグ操作後にスムーズなスナップアニメーションが実現され、ユーザー体験が向上しました。変更は CSS のみで完結しており、既存のロジックや他のスタイルへの影響は最小限です。