みなさん、こんにちは
なつまるです

4月になりまして、
株式会社CHEATは無事4年目を迎えました

たまたまこの記事を読んでくれている方、お仕事を依頼しようと思って
偶然この記事にたどり着いた方、なんかよくわからんけど読んでくれている方、
本当に、ありがとうございます。笑

今日は久しぶりにプログラミングの記事を書いていきますよ~~

 

バウンス効果って?

突然ですが、バウンス効果ってご存知ですか?

私は10分前に知りました

 

androidのことはちょっと分からないのですが、iPhoneって
サイト見てるとき、どんどんスクロールして一番下までいくと、ボヨヨ~ンってなるじゃないですか?

逆に、また一番上までスイスイスクロールすると、それはそれでポヨンポヨンなるじゃないですか?

それです

 

バウンス効果は分かったけど、なんで無効化するん?

スクロールが必要な長いサイトならいいんですが、ログイン画面のような短くて、
スクロールが不要なサイトにはバウンス効果無効化させたい!と思ったことないですか?

twitterとか、LINEのニュースタブなど、上から引っ張って更新できるようにしているサイトとかだと
バウンス効果をオフにしている方がいい!とかありますよね~

 

…ありますよね?

 

無効化の方法

やっと本題です

無効化するには、javascriptのプラグインひとつで解決します

その名も、iNoBounce

 

まずは、Githubからソースをダウンロードして、inobounce.min.jsというファイルを配置します
(inobounce.jsはどっちでもいいですが、私はバージョン書いていたので配置しています)

 

次に、ソースで読み込みます
ソースパスなどは、各自環境に合わせてください

 

最後に、以下のコードを記載して完了です

※jQueryを使用してのコードです

 

さらっと解説しておくと
html(サイト全体)の高さ cHeight と、iPhoneの画面サイズ bHeight を比較して
cHeight よりも bHeight の方が低い(短い?小さい?)ければ、バウンス効果をオフ(iNoBounce.enable();)にしています

逆に、cHeight よりも bHeight の方が高い(長い?大きい?)ければバウンス効果をオン(iNoBounce.disable();)にしています
書かなくてもOKだと思うんですが、PWAとかで動き怪しくなる

まとめ

RECOMMENDED POSTこの記事もおすすめ!