バウンススクロールを制御する方法

バウンススクロールを打ち消したい

アプリ風のウェブサイトを作る際にバウンススクロールの制御で手間取ったのでメモ

採用した方法

position:fixedを使ってバウンススクロールしていないように見せかける方法を採用。

問題点

実際にバウンススクロールを起こすと数秒間フリーズし要素に触れなくなるというiOSのバグにぶつかった。
フリーズ中に更にスクロールを行うと追加で数秒間フリーズされる。

解決方法

スクロール位置を検知し上下にスクロールが行われたらスクロール位置を0に矯正するjsと追加。

$(window).on('touchmove', (e) => {
  let moveY = $(window).scrollTop();
  if(moveY !== 0){
    $(window).scrollTop(0);
  }
});

まとめ

これでひとまず動いたので一旦これで。