Mac の chrome を使っている時に稀にコンテンツの外に無限にスクロールしてしまう症状が発生しています。
👇 Amazon のサイトで発生した時のキャプチャ
モバイルブラウザで引っ張れる Bounce Scroll の機能がバグっているようにも見えます。発生原因がよくわからず環境起因である可能性もあるのですが制作したサイトでも稀に発生してしまっていたので修正しておきたいと思いました。
環境
overscroll-behavior で領域外のスクロールを抑止できる
By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.
In some cases these behaviors are not desirable. You can useoverscroll-behaviorto get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.
cf. overscroll-behavior - CSS: Cascading Style Sheets | MDN
モバイルブラウザの Bounce や スクロールエリアにスクロールエリアが重なっている時のスクロールの制御をできるプロパティ
このプロパティを使うと Chrome の領域外に飛び出した無限スクロールを抑制できるっぽい
body { overscroll-behavior: none; }
👇 devtool で overscroll-behavior: none を追加した例
左右の Bounce は進む / 戻るのジェスチャにもなっているので上下の Bounce でコンテンツのロードとかをしないサイトであれば overscroll-behavior-y: none を使うのが良さそう
body { overscroll-behavior-y: none; }
Chrome の領域外への無限スクロールの発生原因が謎なのが気持ち悪いですが、この CSS を追加することで抑制することができました！
₍ ᐢ. ̫ .ᐢ ₎ よくわからないけど、よし！ ₍ ᐢ. ̫ .ᐢ ₎
おわり
[参考]
