スマホの縦横スクロールの「斜め動き」は軸ロックで防ぐ
React
フロントエンド
縦スクロールコンテナの中に横に広いテーブルを置き、overflow-y と横に広い width:fit-content を組むと、スマホのタッチで縦横の移動量がそのまま反映されて「斜めスクロール」になりやすい。overscroll-behavior-x:none はスクロール連鎖を抑えるだけで軸ロックにはならない。touch-action: pan-x/pan-y だけでは片方向のスクロールを犠牲にしやすい。最適解は touchstart で開始座標と scrollTop/scrollLeft を保持し、touchmove で移動量がしきい値(8〜12px)を超えたら縦/横の優先軸を確定し、ジェスチャ中は非優先軸を開始位置に固定すること。preventDefault で全握りせずネイティブスクロールは使い続け、非優先軸だけ補正すると慣性スクロールを壊さずに済む。再利用のため専用 hook(useAxisLockedScroll 等)に切り出す。