ギャラリーサイトなどによく使われるjQueryプラグイン「Infinite Scroll」は、WordPressプラグインとしても配布されていたりする人気が高いプラグインですね。
それで「大英図書館Lovers」というサイトを作った時に「Infinite Scroll」はわりとすんなり実装できたので、新しいサイトを作る時には流用してよく使っています。
なんか動きがおかしい
ですが、どうも今作っているサイトでは挙動がおかしい・・・本来の動きですと、一定の位置までスクロールすると次のページが読み込まれるはずなんですが、ちょっとスクロールしただけでも次のページが読み込まれてしまう。
困ったのでネット上を検索
そこで、困ったのでネット上を検索するとwebutubutuさんのこちらの記事「Infinite scroll導入でつまずいた点のメモ」にたどり着きました。
よくある例で、読み込むアイテムを指定する「itemSelector」と次ページリンクなどを指定する「navSelector」間でfloatなどの解除がうまくいっていないと「ちょっとスクロールしても次ページが読み込まれる現象」は起こったりしますね。そのような内容をわかりやすく解説されています。
ただ、私の場合はfloat問題もないみたいだし、今回遭遇している状況はまた別問題なんだろうなぁという感じでした。
結局自力で解決しました
というわけで、結局いろいろと自力で試していたんですが、どうやら「ドキュメントタイプ宣言」を書いておかないとうまく動かないようです。
例えばhtml5のドキュメントタイプ宣言ですと、
<!DOCTYPE html>と書いたりすればOKです。
ほんとに、とんでもなく基本的で細かい事なんですが、私はこれがわからず数時間ハマってました・・・；；
なんともしょうがないですね。
今後も同じようなことで困って検索したら、このページにたどり着けるようにメモっておくことにしますｗ
このページを共有する