質問編集履歴

3

慣性スクロールについて追記

2019/12/17 03:52

投稿

Ibuki90
Ibuki90

スコア8

test CHANGED
File without changes
test CHANGED
@@ -115,3 +115,11 @@
115
115
  });
116
116
 
117
117
  ```
118
+
119
+
120
+
121
+ 追記です。
122
+
123
+
124
+
125
+ iOS13から慣性スクロールがデフォルトで有効になっていて、無効にできなくなっているようです。無効にできれば早いんですが。

2

誤解された部分を修正

2019/12/17 03:52

投稿

Ibuki90
Ibuki90

スコア8

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  その際、要素追加前に位置を記録し、追加後に追加された高さ分スクロールした位置にスクロールを移動させています。
32
32
 
33
- ただ、iosでは慣性スクロールの影響か、慣性スクロールが止まるまでスクロール位置が移動してくれません。そのため、要素の追加が大量に発火してしまいます。
33
+ ただ、iosでは慣性スクロールの影響か、慣性スクロールが止まるまでスクロール位置が移動してくれません。
34
34
 
35
35
 
36
36
 

1

コードを質問本文に記載

2019/12/16 08:25

投稿

Ibuki90
Ibuki90

スコア8

test CHANGED
File without changes
test CHANGED
@@ -35,3 +35,83 @@
35
35
 
36
36
 
37
37
  ライブラリでも実装でも何でも良いので、解決策があれば教えていただけないでしょうか。よろしくお願いします。
38
+
39
+
40
+
41
+ 指摘がありましたので、CodePen内のコードを以下にも記載します。
42
+
43
+
44
+
45
+ ```html
46
+
47
+ <div class="posts"></div>
48
+
49
+ ```
50
+
51
+
52
+
53
+ ```js
54
+
55
+ function postEl(text) {
56
+
57
+ return `<div>${text}</div>`;
58
+
59
+ }
60
+
61
+
62
+
63
+ function setupInitialPosts() {
64
+
65
+ [...Array(100).keys()].forEach(i => {
66
+
67
+ const text = `post${i}`
68
+
69
+ $('.posts').append(postEl(text));
70
+
71
+ });
72
+
73
+ $(document).scrollTop(1000);
74
+
75
+ }
76
+
77
+
78
+
79
+ $(() => {
80
+
81
+ setupInitialPosts();
82
+
83
+
84
+
85
+ let prependedCount = 0;
86
+
87
+ $(document).scroll(() => {
88
+
89
+ if($(document).scrollTop() < 200) {
90
+
91
+ const beforeUpdatingScrollTop = $(document).scrollTop();
92
+
93
+ [...Array(10).keys()].forEach(i => {
94
+
95
+ const text = `prependPost${prependedCount * 10 + i}`;
96
+
97
+ $('.posts').prepend(postEl(text));
98
+
99
+ });
100
+
101
+ prependedCount++;
102
+
103
+
104
+
105
+ const elements = $('.posts div');
106
+
107
+ const movedScroll = elements[10].offsetTop - elements[0].offsetTop;
108
+
109
+ $(document).scrollTop(beforeUpdatingScrollTop + movedScroll);
110
+
111
+ };
112
+
113
+ });
114
+
115
+ });
116
+
117
+ ```