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

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

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

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

採用した方法

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

問題点

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

フリーズ中に更にスクロールを行うと追加で数秒間フリーズされる。

解決方法

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

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

まとめ

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