【javascript】iOSで一部だけスクロールさせる

iOSで画面全体がスクロールされるのを無効化

iPadやiPhoneなど、iOS機器では画面のスクロールが上限、もしくは下限までいった状態でスクロールを続けると画面全体がスクロールされたような動きになります。

この仕様が、場合によっては問題となることがあり（画面の一部分だけスクロールさせたいなど）、この画面全体のスクロールを無効化する方法をメモしておきます。

結論としては、下記のコードを追記することで防ぐことができています。

//スクロールの対象
let target = document.getElementById('target')

//スクロール制御　上限・下限に達したら1ずらす
target.addEventListener('scroll', e => {
  if(target.scrollTop === 0) {
    target.scrollTop = 1
  }else if (target.scrollTop + target.clientHeight === target.scrollHeight){
    target.scrollTop = target.scrollTop - 1
  }
})

target変数には、スクロールの対象にしたい要素を入れます。

処理としては、スクロール上限までいったときに1pxだけ下にスクロールさせ、下限にいった場合にも同じように1pxだけズラすことで結果的にスクロール上限・下限までいかないようにしています（分かりにくい）。

こうすることで、スクロール上限までいった状態でスクロールを続けても画面全体が動くことはなくなります。