Q&A前提・実現したいこと
写真共有アプリを作成しています。
インスタグラムのように無限スクロール機能を付けたくて
kaminariとjscrollを導入しました.
kaminariの導入には成功しましたが、
jscrollが「scrollHeight is not defined」のエラーで
機能しません。
ので、エラーを解決したいです。
Rails 6.1.1
発生している問題・エラーメッセージ
Uncaught ReferenceError: scrollHeight is not defined
該当のソースコード
javascript/packs/scroll.js
javascript
1import $ from 'jquery' 2 3var $jq = jQuery.noConflict(); 4 5$(window).on('scroll', function() { 6 ver scrollHeight = $(document).height(); //verを付けたら1つ目のエラーが解消しました 7 ver scrollPosition = $(window).height() + $(window).scrollTop(); //verを付けたら1つ目のエラーが解消しました 8 if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { 9 10 $('.jscroll').jscroll({ 11 contentSelector: '.article-list-index', 12 nextSelector: 'span.next:last a' 13 }); 14 } 15});
javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() // require("turbolinks").start() require("@rails/activestorage").start() require("channels") require('jquery') //= require popper //= require jquery.jscroll.min.js //= require_tree . // import Rails from "@rails/ujs" // import * as ActiveStorage from "@rails/activestorage" // import "channels" var $jq = jQuery.noConflict(); window.addEventListener('DOMContentLoaded', function(){ $jq('.slider').slick({ dots: true, arrows: false, autoplay: true, autoplaySpeed: 7000, }); $jq('.slick-dots li').on('mouseover', function() { $jq('.a').slick('goTo', $(this).index()); }); });
articles/index.html.haml
.new-post-btn = link_to new_article_path do = icon("fas", "camera") - @articles.each do |article| .jscroll.article-list-index .article .article-poster-info = link_to account_path(id: article.user_id) do .avatar-style - if article.user.profile&.avatar&.attached? = image_tag article.user&.profile&.avatar - else = image_tag 'avatar1.png' .article-poster-info-text .article-username = article.user.username = I18n.l(article.created_at, format: :long) .slider - if article.images.attached? - article.images.each do |image| .article-image = link_to article_path(article) do = image_tag image .article-nav-icon .article_heart.hidden.active-heart{id: "active-heart#{article.id}", data: {article_id: article.id}} = icon("fas", "heart") .article_heart.hidden.inactive-heart{id: "inactive-heart#{article.id}", data: {article_id: article.id}} = icon("far", "heart") = link_to article_path(article) do .article-comment-icon = icon("far", "comment-dots") =link_to "http://twitter.com/share?url=#{ url_for(action: :show,id: article.id,only_path: false) } &text=さらに向こうへPLUS ULTRA!! &hashtags=もうすぐ春ですね",{class:"logo-profile"},target: "_blank" do .article-share-icon = icon("fas", "share-alt") .article-content .article-username = article.user.username = article.content = paginate @articles = javascript_pack_tag 'scroll' .bottom-image = image_tag 'logo.jpg' = javascript_pack_tag 'article'
layouts/application.html.haml
!!! %html %head %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ %title EMT %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/ = csrf_meta_tags = csp_meta_tag = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %link{:href => "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css", :rel => "stylesheet", :type => "text/css"}/ %link{:href => "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css", :rel => "stylesheet", :type => "text/css"}/ %script{:src => "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js", :type => "text/javascript"} %script{:src => "//cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"} %body - unless request.path.include?("sign_up") || request.path.include?("sign_in") .container %header .nav .header-nav-left = link_to root_path do = image_tag 'logo2.png', class: 'logo-home' .header-nav-right - if user_signed_in? = link_to profile_path do - if current_user.profile&.avatar&.attached? .header-nav-avatar = image_tag current_user.profile.avatar - else = image_tag 'avatar1.png', class: 'logo-profile' - else .header-btn-nav .header-btn = link_to 'ログイン', new_user_session_path .header-btn = link_to '新規登録', new_user_registration_path .header-margin - if flash.present? .flash - flash.each do |key, value| %div{:class => key}= value = yield - else = yield
試したこと
//= require jquery.jscroll.min.js
の位置、というか順番を変えてみましたが変化はありませんでした。
.
.
javascript/packs/scroll.jsの下記の部分をコメントアウトしたら
違うエラーが出現しました。
scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { } });
出現したエラー
Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).jscroll is not a function
jscrollは関数ではない、ということですがどういうことでしょうか、、?
画像追加
回答2件
0
varが無いので、宣言されていないエラーが出ているだけと思われます。
scrollHeight,scrollPosition ともに
きちんと変数を宣言(var)してお使いください。
投稿2021/02/01 10:23
総合スコア404
0
自己解決
InfiniteScrollを使用したら動きました！！
投稿2021/02/11 07:37
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/01 10:32
2021/02/01 10:34
2021/02/01 11:18
2021/02/01 11:28
2021/02/01 11:51
2021/02/01 14:22
2021/02/01 15:55
2021/02/01 23:46
2021/02/02 02:52
2021/02/02 03:12
2021/02/02 03:13
2021/02/02 03:39