質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.10%

wordpressの無限スクロールがウィンドウ幅で違う挙動をする件

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,288

score 107

みなさま 

いつもお世話になっております。

wordpressの無限スクロールを実装中に、意図しない動作ではまりましたので
お知恵を拝借したく、質問させていただきます。

■環境
ネット上のVPSサーバ(LAMP環境)

■やったこと
・wordpress上で、index.phpにページング処理(WP-PageNavi)を入れ
・無限スクロールプラグインをインストール(Infinite Scroll)
・試験用に30件程の記事登録

■起こったこと
①ウィンドウが最大の場合(1920x1200)の場合、無限スクロールが行われない
②ウィンドウ幅を1000~1200程度の大きさにして、リロードすると、無限スクロールが反応する

■調査した情報
①ウィンドウ幅が1000程度の場合、画面上の要素がブラウザ下に見切れていて、
スクロールを下まで下げる動作が必要。
また、その場合、無限スクロールはうまくいきます。

②ウィンドウ幅が最大の場合、そもそもスクロールバーが表示されない為、
無限スクロールのイベントを発動するきっかけがない。

■期待する動作と質問事項

ウィンドウ幅が最大の場合にも、無限スクロールをさせたい。

どなたか有識者の方のアドバイスをいただければ幸いです。
どうぞよろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

ウィンドウ幅が最大の場合、そもそもスクロールバーが表示されない為、
無限スクロールのイベントを発動するきっかけがない。 

必ずスクロールバーが出るようにしてみるとか。

body {
    min-height: 120vh;
}

【[CSS3] px や % はもう古い? Viewport unitsという新たな単位『vw』,『vh』の使い方 | phiary】
http://phiary.me/css-viewport-units-vw-vh/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/18 10:15

    kei344様

    回答ありがとうございました。
    こちら、スクロールの幅をコントロールする方針を諦め、最初から画面領域をオーバーする要素数を表示することで、自然にスクロールバーが出る挙動にして落ち着きました。

    ブラウザサイズが何万ピクセルx何万ピクセルという解像度の場合は初期表示の個数が足りなくてスクロールバーが出ないかもしれませんが、そういったイレギュラーな表示は想定しないことにしました。

    ご教示いただきまして、ありがとうございました。

    キャンセル

  • 2016/11/18 10:48

    > イレギュラーな表示
    回答はそれに対応できると思います。(指定しても無害だと思います)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る