1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Inertia.js v2】Infinite Scrollが動かない時に確認すべき2つのこと

1
Last updated at Posted at 2025-12-10

結論:v2の最新版にアプデして、CSSには overflow-y: scroll を使え。以上。

Inertia.js v2から導入された Infinite Scroll(無限スクロール) ですが、実装中に「無限に読み込まれる」や「挙動がおかしい」という場面に遭遇しました。

解決にかかった時間を節約できるよう、ハマりポイントを2点共有します。

1. バージョンの確認

結論はinertia.jsのversionを最新にしよう!ということです。
公式ドキュメントでは2.xのように詳細なバージョンは指定されずドキュメントが書かれているので、古いバージョンを使っていると機能を使えない可能性があります

2. カスタムコンテナーでの注意点

特定のHTML要素にてoverflowYでInfinite Scrollを格納する場合は overflowY:'scroll'を指定しましょう。
'auto'などではIntersection Observer APIが現在の位置を誤認して無限スクロールが発生する可能性があります

1
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?