1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

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

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

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

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

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

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?