質問編集履歴

3

コードの修正

2021/02/02 11:13

投稿

Autophagy______
Autophagy______

スコア0

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  #### javascript/packs/scroll.js
42
42
 
43
- ```
43
+ ```javascript
44
44
 
45
45
  import $ from 'jquery'
46
46
 
@@ -52,6 +52,334 @@
52
52
 
53
53
  $(window).on('scroll', function() {
54
54
 
55
+ ver scrollHeight = $(document).height(); //verを付けたら1つ目のエラーが解消しました
56
+
57
+ ver scrollPosition = $(window).height() + $(window).scrollTop(); //verを付けたら1つ目のエラーが解消しました
58
+
59
+ if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
60
+
61
+
62
+
63
+ $('.jscroll').jscroll({
64
+
65
+ contentSelector: '.article-list-index',
66
+
67
+ nextSelector: 'span.next:last a'
68
+
69
+ });
70
+
71
+ }
72
+
73
+ });
74
+
75
+ ```
76
+
77
+
78
+
79
+ #### javascript/packs/application.js
80
+
81
+ ```
82
+
83
+ // This file is automatically compiled by Webpack, along with any other files
84
+
85
+ // present in this directory. You're encouraged to place your actual application logic in
86
+
87
+ // a relevant structure within app/javascript and only use these pack files to reference
88
+
89
+ // that code so it'll be compiled.
90
+
91
+ require("@rails/ujs").start()
92
+
93
+ // require("turbolinks").start()
94
+
95
+ require("@rails/activestorage").start()
96
+
97
+ require("channels")
98
+
99
+ require('jquery')
100
+
101
+
102
+
103
+
104
+
105
+ //= require popper
106
+
107
+ //= require jquery.jscroll.min.js
108
+
109
+ //= require_tree .
110
+
111
+
112
+
113
+ // import Rails from "@rails/ujs"
114
+
115
+ // import * as ActiveStorage from "@rails/activestorage"
116
+
117
+ // import "channels"
118
+
119
+
120
+
121
+ var $jq = jQuery.noConflict();
122
+
123
+ window.addEventListener('DOMContentLoaded', function(){
124
+
125
+
126
+
127
+ $jq('.slider').slick({
128
+
129
+ dots: true,
130
+
131
+ arrows: false,
132
+
133
+ autoplay: true,
134
+
135
+ autoplaySpeed: 7000,
136
+
137
+ });
138
+
139
+
140
+
141
+ $jq('.slick-dots li').on('mouseover', function() {
142
+
143
+ $jq('.a').slick('goTo', $(this).index());
144
+
145
+ });
146
+
147
+ });
148
+
149
+
150
+
151
+ ```
152
+
153
+
154
+
155
+ #### articles/index.html.haml
156
+
157
+ ```
158
+
159
+ .new-post-btn
160
+
161
+ = link_to new_article_path do
162
+
163
+ = icon("fas", "camera")
164
+
165
+ - @articles.each do |article|
166
+
167
+ .jscroll.article-list-index
168
+
169
+ .article
170
+
171
+ .article-poster-info
172
+
173
+ = link_to account_path(id: article.user_id) do
174
+
175
+ .avatar-style
176
+
177
+ - if article.user.profile&.avatar&.attached?
178
+
179
+ = image_tag article.user&.profile&.avatar
180
+
181
+ - else
182
+
183
+ = image_tag 'avatar1.png'
184
+
185
+ .article-poster-info-text
186
+
187
+ .article-username
188
+
189
+ = article.user.username
190
+
191
+ = I18n.l(article.created_at, format: :long)
192
+
193
+ .slider
194
+
195
+ - if article.images.attached?
196
+
197
+ - article.images.each do |image|
198
+
199
+ .article-image
200
+
201
+ = link_to article_path(article) do
202
+
203
+ = image_tag image
204
+
205
+ .article-nav-icon
206
+
207
+ .article_heart.hidden.active-heart{id: "active-heart#{article.id}", data: {article_id: article.id}}
208
+
209
+ = icon("fas", "heart")
210
+
211
+ .article_heart.hidden.inactive-heart{id: "inactive-heart#{article.id}", data: {article_id: article.id}}
212
+
213
+ = icon("far", "heart")
214
+
215
+ = link_to article_path(article) do
216
+
217
+ .article-comment-icon
218
+
219
+ = icon("far", "comment-dots")
220
+
221
+ =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
222
+
223
+ .article-share-icon
224
+
225
+ = icon("fas", "share-alt")
226
+
227
+ .article-content
228
+
229
+ .article-username
230
+
231
+ = article.user.username
232
+
233
+ = article.content
234
+
235
+
236
+
237
+ = paginate @articles
238
+
239
+
240
+
241
+ = javascript_pack_tag 'scroll'
242
+
243
+
244
+
245
+ .bottom-image
246
+
247
+ = image_tag 'logo.jpg'
248
+
249
+
250
+
251
+ = javascript_pack_tag 'article'
252
+
253
+
254
+
255
+ ```
256
+
257
+ #### layouts/application.html.haml
258
+
259
+ ```
260
+
261
+ !!!
262
+
263
+ %html
264
+
265
+ %head
266
+
267
+ %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
268
+
269
+ %title EMT
270
+
271
+ %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
272
+
273
+ = csrf_meta_tags
274
+
275
+ = csp_meta_tag
276
+
277
+ = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
278
+
279
+ = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
280
+
281
+ %link{:href => "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css", :rel => "stylesheet", :type => "text/css"}/
282
+
283
+ %link{:href => "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css", :rel => "stylesheet", :type => "text/css"}/
284
+
285
+ %script{:src => "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js", :type => "text/javascript"}
286
+
287
+ %script{:src => "//cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"}
288
+
289
+
290
+
291
+ %body
292
+
293
+ - unless request.path.include?("sign_up") || request.path.include?("sign_in")
294
+
295
+ .container
296
+
297
+ %header
298
+
299
+ .nav
300
+
301
+ .header-nav-left
302
+
303
+ = link_to root_path do
304
+
305
+ = image_tag 'logo2.png', class: 'logo-home'
306
+
307
+ .header-nav-right
308
+
309
+ - if user_signed_in?
310
+
311
+ = link_to profile_path do
312
+
313
+ - if current_user.profile&.avatar&.attached?
314
+
315
+ .header-nav-avatar
316
+
317
+ = image_tag current_user.profile.avatar
318
+
319
+ - else
320
+
321
+ = image_tag 'avatar1.png', class: 'logo-profile'
322
+
323
+ - else
324
+
325
+ .header-btn-nav
326
+
327
+ .header-btn
328
+
329
+ = link_to 'ログイン', new_user_session_path
330
+
331
+ .header-btn
332
+
333
+ = link_to '新規登録', new_user_registration_path
334
+
335
+ .header-margin
336
+
337
+ - if flash.present?
338
+
339
+ .flash
340
+
341
+ - flash.each do |key, value|
342
+
343
+ %div{:class => key}= value
344
+
345
+ = yield
346
+
347
+ - else
348
+
349
+ = yield
350
+
351
+
352
+
353
+ ```
354
+
355
+
356
+
357
+
358
+
359
+ ### 試したこと
360
+
361
+
362
+
363
+ //= require jquery.jscroll.min.js
364
+
365
+ の位置、というか順番を変えてみましたが変化はありませんでした。
366
+
367
+ .
368
+
369
+ .
370
+
371
+
372
+
373
+
374
+
375
+ javascript/packs/scroll.jsの下記の部分をコメントアウトしたら
376
+
377
+ 違うエラーが出現しました。
378
+
379
+
380
+
381
+ ```
382
+
55
383
  scrollHeight = $(document).height();
56
384
 
57
385
  scrollPosition = $(window).height() + $(window).scrollTop();
@@ -60,13 +388,9 @@
60
388
 
61
389
 
62
390
 
63
- $('.jscroll').jscroll({
391
+
64
-
65
- contentSelector: '.article-list-index',
392
+
66
-
67
- nextSelector: 'span.next:last a'
393
+
68
-
69
- });
70
394
 
71
395
  }
72
396
 
@@ -76,330 +400,6 @@
76
400
 
77
401
 
78
402
 
79
- #### javascript/packs/application.js
80
-
81
- ```
82
-
83
- // This file is automatically compiled by Webpack, along with any other files
84
-
85
- // present in this directory. You're encouraged to place your actual application logic in
86
-
87
- // a relevant structure within app/javascript and only use these pack files to reference
88
-
89
- // that code so it'll be compiled.
90
-
91
- require("@rails/ujs").start()
92
-
93
- // require("turbolinks").start()
94
-
95
- require("@rails/activestorage").start()
96
-
97
- require("channels")
98
-
99
- require('jquery')
100
-
101
-
102
-
103
-
104
-
105
- //= require popper
106
-
107
- //= require jquery.jscroll.min.js
108
-
109
- //= require_tree .
110
-
111
-
112
-
113
- // import Rails from "@rails/ujs"
114
-
115
- // import * as ActiveStorage from "@rails/activestorage"
116
-
117
- // import "channels"
118
-
119
-
120
-
121
- var $jq = jQuery.noConflict();
122
-
123
- window.addEventListener('DOMContentLoaded', function(){
124
-
125
-
126
-
127
- $jq('.slider').slick({
128
-
129
- dots: true,
130
-
131
- arrows: false,
132
-
133
- autoplay: true,
134
-
135
- autoplaySpeed: 7000,
136
-
137
- });
138
-
139
-
140
-
141
- $jq('.slick-dots li').on('mouseover', function() {
142
-
143
- $jq('.a').slick('goTo', $(this).index());
144
-
145
- });
146
-
147
- });
148
-
149
-
150
-
151
- ```
152
-
153
-
154
-
155
- #### articles/index.html.haml
156
-
157
- ```
158
-
159
- .new-post-btn
160
-
161
- = link_to new_article_path do
162
-
163
- = icon("fas", "camera")
164
-
165
- - @articles.each do |article|
166
-
167
- .jscroll.article-list-index
168
-
169
- .article
170
-
171
- .article-poster-info
172
-
173
- = link_to account_path(id: article.user_id) do
174
-
175
- .avatar-style
176
-
177
- - if article.user.profile&.avatar&.attached?
178
-
179
- = image_tag article.user&.profile&.avatar
180
-
181
- - else
182
-
183
- = image_tag 'avatar1.png'
184
-
185
- .article-poster-info-text
186
-
187
- .article-username
188
-
189
- = article.user.username
190
-
191
- = I18n.l(article.created_at, format: :long)
192
-
193
- .slider
194
-
195
- - if article.images.attached?
196
-
197
- - article.images.each do |image|
198
-
199
- .article-image
200
-
201
- = link_to article_path(article) do
202
-
203
- = image_tag image
204
-
205
- .article-nav-icon
206
-
207
- .article_heart.hidden.active-heart{id: "active-heart#{article.id}", data: {article_id: article.id}}
208
-
209
- = icon("fas", "heart")
210
-
211
- .article_heart.hidden.inactive-heart{id: "inactive-heart#{article.id}", data: {article_id: article.id}}
212
-
213
- = icon("far", "heart")
214
-
215
- = link_to article_path(article) do
216
-
217
- .article-comment-icon
218
-
219
- = icon("far", "comment-dots")
220
-
221
- =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
222
-
223
- .article-share-icon
224
-
225
- = icon("fas", "share-alt")
226
-
227
- .article-content
228
-
229
- .article-username
230
-
231
- = article.user.username
232
-
233
- = article.content
234
-
235
-
236
-
237
- = paginate @articles
238
-
239
-
240
-
241
- = javascript_pack_tag 'scroll'
242
-
243
-
244
-
245
- .bottom-image
246
-
247
- = image_tag 'logo.jpg'
248
-
249
-
250
-
251
- = javascript_pack_tag 'article'
252
-
253
-
254
-
255
- ```
256
-
257
- #### layouts/application.html.haml
258
-
259
- ```
260
-
261
- !!!
262
-
263
- %html
264
-
265
- %head
266
-
267
- %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
268
-
269
- %title EMT
270
-
271
- %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
272
-
273
- = csrf_meta_tags
274
-
275
- = csp_meta_tag
276
-
277
- = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
278
-
279
- = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
280
-
281
- %link{:href => "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css", :rel => "stylesheet", :type => "text/css"}/
282
-
283
- %link{:href => "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css", :rel => "stylesheet", :type => "text/css"}/
284
-
285
- %script{:src => "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js", :type => "text/javascript"}
286
-
287
- %script{:src => "//cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"}
288
-
289
-
290
-
291
- %body
292
-
293
- - unless request.path.include?("sign_up") || request.path.include?("sign_in")
294
-
295
- .container
296
-
297
- %header
298
-
299
- .nav
300
-
301
- .header-nav-left
302
-
303
- = link_to root_path do
304
-
305
- = image_tag 'logo2.png', class: 'logo-home'
306
-
307
- .header-nav-right
308
-
309
- - if user_signed_in?
310
-
311
- = link_to profile_path do
312
-
313
- - if current_user.profile&.avatar&.attached?
314
-
315
- .header-nav-avatar
316
-
317
- = image_tag current_user.profile.avatar
318
-
319
- - else
320
-
321
- = image_tag 'avatar1.png', class: 'logo-profile'
322
-
323
- - else
324
-
325
- .header-btn-nav
326
-
327
- .header-btn
328
-
329
- = link_to 'ログイン', new_user_session_path
330
-
331
- .header-btn
332
-
333
- = link_to '新規登録', new_user_registration_path
334
-
335
- .header-margin
336
-
337
- - if flash.present?
338
-
339
- .flash
340
-
341
- - flash.each do |key, value|
342
-
343
- %div{:class => key}= value
344
-
345
- = yield
346
-
347
- - else
348
-
349
- = yield
350
-
351
-
352
-
353
- ```
354
-
355
-
356
-
357
-
358
-
359
- ### 試したこと
360
-
361
-
362
-
363
- //= require jquery.jscroll.min.js
364
-
365
- の位置、というか順番を変えてみましたが変化はありませんでした。
366
-
367
- .
368
-
369
- .
370
-
371
-
372
-
373
-
374
-
375
- javascript/packs/scroll.jsの下記の部分をコメントアウトしたら
376
-
377
- 違うエラーが出現しました。
378
-
379
-
380
-
381
- ```
382
-
383
- scrollHeight = $(document).height();
384
-
385
- scrollPosition = $(window).height() + $(window).scrollTop();
386
-
387
- if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
388
-
389
-
390
-
391
-
392
-
393
-
394
-
395
- }
396
-
397
- });
398
-
399
- ```
400
-
401
-
402
-
403
403
  出現したエラー
404
404
 
405
405
  ```

2

エラーの発生画面を追加しました。

2021/02/02 11:13

投稿

Autophagy______
Autophagy______

スコア0

test CHANGED
File without changes
test CHANGED
@@ -409,3 +409,9 @@
409
409
  ```
410
410
 
411
411
  jscrollは関数ではない、ということですがどういうことでしょうか、、?
412
+
413
+
414
+
415
+ ### 画像追加
416
+
417
+ ![エラー発生画面](dafc3157c83495a514e11cf7922729da.png)

1

質問の追記

2021/02/02 03:42

投稿

Autophagy______
Autophagy______

スコア0

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,11 @@
6
6
 
7
7
  インスタグラムのように無限スクロール機能を付けたくて
8
8
 
9
+ kaminariとjscrollを導入しました.
10
+
11
+ kaminariの導入には成功しましたが、
12
+
9
- jscrollを導入しましたが「scrollHeight is not defined」のエラーで
13
+ jscrollが「scrollHeight is not defined」のエラーで
10
14
 
11
15
  機能しません。
12
16