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

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

ただいまの
回答率

90.62%

  • JavaScript

    15866questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby

    7296questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • jQuery

    6522questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ruby on Rails 5

    1516questions

  • jQueryプラグイン

    477questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

MasonryとInfinite Scroll導入でエラー。1ページ目の下に2ページ目が潜り込む・・・。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 259

YukiAgatsuma

score 4

 前提・実現したいこと

【通常時】
index
【エラー画像(1ページ目の下に2ページ目が潜り込む)】
スクロールした際の状態
【補足:】作成アプリと問題点のGIF

ruby on rails5で音楽のジャケットを閲覧できるアプリを作成しております。レイアウトはmasonryを使用しています。音楽のデータが大量(1,000件)にあるため、infinite scrollを使用してスクロールする度に次の150件が表示される設計にしようとしています。

しかしながら、スクロールをして、2ページ目が表示される部分に差し掛かると、1ページ目の下に2ページ目が食い込むような形でinfinite scrollが発動されます。。

この問題が解けずに2日くらい悩んでいます。。
どなたか解決法がわかる方、もしくはヒントでも結構ですのでご教示いただければ幸いです。

 該当のソースコード

$(document).on('turbolinks:load', function(){
  var $main = $('.main');

  $main.masonry({
    itemSelector : '.box',
    isAnimated: true,
    animationOptions: {
    duration: 800,
    easing: 'swing'
    }
  });

  $main.infiniteScroll( {
    path : ".next a",
    append : ".popup-modal",
    scrollThreshold: 40,
    history : false
  });
});
<div class="main">
  <% @artworks.each do |artwork| %>
    <% if artwork.size == 1 then %>
      <div class="box size--1"">
        <%= image_tag artwork.image %>
      </div>
    <% elsif artwork.size == 2 then%>
      <div class="box size--2">
        <%= image_tag artwork.image %>
      </div>
    <% elsif artwork.size == 3 then%>
      <div class="box size--3">
        <%= image_tag artwork.image %>
      </div>
    <% end %>
  <% end %>

  <div class="navigation" id="navigation" style="display:none;">
    <%= paginate @artworks %>
  </div>
</div>
body {
  position: relative;
}

.main {
  margin-top: 86px;
  margin-left: 20px;
  margin-right: 10px;
  width: auto;
  height: auto;

  img {
    max-width: 100%;
    height: 100%;
    border-radius: 6px 6px 6px 6px;
  }

  .box {
    margin: 5px;
    padding: 2px;
    box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
    background-color: #FFF;
  }


  .size {
    margin: 0px;

    &--1 {
      width: 100px;
      height: 100px;
    }

    &--2 {
      width: 100px;
      height: 125px;
    }

    &--3 {
      width: 100px;
      height:140px;
    }
}

 試して見たこと

inifinite-scroll公式サイト
公式サイトにあるデモ

上記2つのリンクから解決法を考え、
一度、上部のソースコードにあるJavaScriptに下記2つの記述をしてみました。

① masonryのデータを取得

var msnry = $main.data('masonry');


② さらに、inifiniteScrollにオプション追加

outlayer : msnry,


しかしながらこれを実践すると、エラーGIFのように、Masonryのコードで何かが引っかかってエラーになります(下記参照)。。

↓console上のエラー表示

jquery.masonry.self-e55a2ca40f0bd20129930439c10a6b8c5dd26787b41fd8427db5b9da8c2af52f.js?body=1:93 Uncaught TypeError: $elems.filter is not a function
    at $.Mason._filterFindBricks (jquery.masonry.self-e55a2ca40f0bd20129930439c10a6b8c5dd26787b41fd8427db5b9da8c2af52f.js?body=1:93)
    at $.Mason._getBricks (jquery.masonry.self-e55a2ca40f0bd20129930439c10a6b8c5dd26787b41fd8427db5b9da8c2af52f.js?body=1:97)
    at $.Mason._appended (jquery.masonry.self-e55a2ca40f0bd20129930439c10a6b8c5dd26787b41fd8427db5b9da8c2af52f.js?body=1:353)
    at $.Mason.appended (jquery.masonry.self-e55a2ca40f0bd20129930439c10a6b8c5dd26787b41fd8427db5b9da8c2af52f.js?body=1:348)
    at InfiniteScroll.proto.onAppendOutlayer (infinite-scroll.pkgd.self-1ea8b2b51502ba9419567d1ee98f1fa1fcdbaa6ec3c5c4b6d1dcd4f1f6866c63.js?body=1:1114)
    at InfiniteScroll.proto.emitEvent (infinite-scroll.pkgd.self-1ea8b2b51502ba9419567d1ee98f1fa1fcdbaa6ec3c5c4b6d1dcd4f1f6866c63.js?body=1:255)
    at InfiniteScroll.proto.dispatchEvent (infinite-scroll.pkgd.self-1ea8b2b51502ba9419567d1ee98f1fa1fcdbaa6ec3c5c4b6d1dcd4f1f6866c63.js?body=1:689)
    at InfiniteScroll.<anonymous> (infinite-scroll.pkgd.self-1ea8b2b51502ba9419567d1ee98f1fa1fcdbaa6ec3c5c4b6d1dcd4f1f6866c63.js?body=1:1047)
    at ImagesLoaded.proto.emitEvent (infinite-scroll.pkgd.self-1ea8b2b51502ba9419567d1ee98f1fa1fcdbaa6ec3c5c4b6d1dcd4f1f6866c63.js?body=1:255)
    at ImagesLoaded.complete (infinite-scroll.pkgd.self-1ea8b2b51502ba9419567d1ee98f1fa1fcdbaa6ec3c5c4b6d1dcd4f1f6866c63.js?body=1:2069)


エラー画像
↓$elems.filter is not a functionって言われたのでその該当箇所

    _filterFindBricks: function( $elems ) {
      var selector = this.options.itemSelector;
      // if there is a selector
      // filter/find appropriate item elements
      return !selector ? $elems : $elems.filter( selector ).add( $elems.find( selector ) );
    },


エラー画像2

よろしくお願いいたします。。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • mts10806

    2018/06/15 13:53 編集

    画面キャプチャは外部サービスではなくteratail内の機能をお使いください。リンクにもなっていないので確認のためのコピペの手間も発生しますし、何かの障害などでその外部サービスが利用できなくなったときにキャプチャ見れなくなりますので。

    キャンセル

  • YukiAgatsuma

    2018/06/15 14:01

    ご指摘ありがとうございます、やって見ます!

    キャンセル

  • mts10806

    2018/06/15 14:11

    いえ・・リンクにして欲しかったわけではなく、画像をteratail内の画像アップロード機能使って欲しかったんですが・・・

    キャンセル

  • YukiAgatsuma

    2018/06/15 14:35

    編集しました、すいません、よろしくお願いいたします。

    キャンセル

まだ回答がついていません

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

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

関連した質問

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

  • JavaScript

    15866questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby

    7296questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • jQuery

    6522questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ruby on Rails 5

    1516questions

  • jQueryプラグイン

    477questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。