morphing-scroll 1.4.16 → 1.5.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -40
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|

|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<h2></h2>
|
|
4
4
|
|
|
5
5
|
### 〈♦ Table of contents 〉
|
|
6
6
|
|
|
@@ -11,13 +11,13 @@
|
|
|
11
11
|
- [IntersectionTracker](#-intersectiontracker-)
|
|
12
12
|
- [API](#-api-)
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
<h2></h2>
|
|
15
15
|
|
|
16
16
|
### 〈♦ About 〉
|
|
17
17
|
|
|
18
18
|
`morphing-scroll` is a `React` library designed to optimize the rendering of data lists. It leverages virtual rendering and lazy loading to handle large datasets efficiently, significantly enhancing performance. The library also resolves cross-browser inconsistencies in scroll element rendering by replacing them with custom ones. Additionally, it provides convenient horizontal scrolling with flexible content movement options.
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
<h2></h2>
|
|
21
21
|
|
|
22
22
|
### 〈♦ Installation 〉
|
|
23
23
|
|
|
@@ -27,7 +27,7 @@ To install the library, use the following command:
|
|
|
27
27
|
npm install morphing-scroll
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
<h2></h2>
|
|
31
31
|
|
|
32
32
|
### 〈♦ MorphScroll 〉
|
|
33
33
|
|
|
@@ -59,7 +59,7 @@ npm install morphing-scroll
|
|
|
59
59
|
</ul>
|
|
60
60
|
</details>
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
<h2></h2>
|
|
63
63
|
|
|
64
64
|
<details>
|
|
65
65
|
<summary><strong><code>children</code></strong> : <em>Custom user content.</em></summary><br />
|
|
@@ -84,7 +84,7 @@ npm install morphing-scroll
|
|
|
84
84
|
</ul>
|
|
85
85
|
</details>
|
|
86
86
|
|
|
87
|
-
|
|
87
|
+
<h2></h2>
|
|
88
88
|
|
|
89
89
|
#### SCROLL SETTINGS:
|
|
90
90
|
|
|
@@ -114,7 +114,7 @@ npm install morphing-scroll
|
|
|
114
114
|
</ul>
|
|
115
115
|
</details>
|
|
116
116
|
|
|
117
|
-
|
|
117
|
+
<h2></h2>
|
|
118
118
|
|
|
119
119
|
<details>
|
|
120
120
|
<summary><strong><code>direction</code></strong> : <em>Scrolling direction.</em></summary><br />
|
|
@@ -141,7 +141,7 @@ npm install morphing-scroll
|
|
|
141
141
|
</ul>
|
|
142
142
|
</details>
|
|
143
143
|
|
|
144
|
-
|
|
144
|
+
<h2></h2>
|
|
145
145
|
|
|
146
146
|
<details>
|
|
147
147
|
<summary><strong><code>scrollTop</code></strong> : <em>Scroll position and animation duration.</em></summary><br />
|
|
@@ -179,7 +179,7 @@ npm install morphing-scroll
|
|
|
179
179
|
</ul>
|
|
180
180
|
</details>
|
|
181
181
|
|
|
182
|
-
|
|
182
|
+
<h2></h2>
|
|
183
183
|
|
|
184
184
|
<details>
|
|
185
185
|
<summary><strong><code>stopLoadOnScroll</code></strong> : <em>Stop loading when scrolling.</em></summary><br />
|
|
@@ -205,7 +205,7 @@ npm install morphing-scroll
|
|
|
205
205
|
</ul>
|
|
206
206
|
</details>
|
|
207
207
|
|
|
208
|
-
|
|
208
|
+
<h2></h2>
|
|
209
209
|
|
|
210
210
|
<details>
|
|
211
211
|
<summary><strong><code>onScrollValue</code></strong> : <em>Callback for scroll value.</em></summary><br />
|
|
@@ -234,7 +234,7 @@ npm install morphing-scroll
|
|
|
234
234
|
</ul>
|
|
235
235
|
</details>
|
|
236
236
|
|
|
237
|
-
|
|
237
|
+
<h2></h2>
|
|
238
238
|
|
|
239
239
|
<details>
|
|
240
240
|
<summary><strong><code>isScrolling</code></strong> : <em>Callback function for scroll status.</em></summary><br />
|
|
@@ -260,7 +260,7 @@ npm install morphing-scroll
|
|
|
260
260
|
</ul>
|
|
261
261
|
</details>
|
|
262
262
|
|
|
263
|
-
|
|
263
|
+
<h2></h2>
|
|
264
264
|
|
|
265
265
|
#### VISUAL SETTINGS:
|
|
266
266
|
|
|
@@ -294,7 +294,7 @@ npm install morphing-scroll
|
|
|
294
294
|
</ul>
|
|
295
295
|
</details>
|
|
296
296
|
|
|
297
|
-
|
|
297
|
+
<h2></h2>
|
|
298
298
|
|
|
299
299
|
<details>
|
|
300
300
|
<summary><strong><code>objectsSize</code> (required)</strong> : <em>Required: Size of cells for each object.</em></summary><br />
|
|
@@ -327,7 +327,7 @@ npm install morphing-scroll
|
|
|
327
327
|
</ul>
|
|
328
328
|
</details>
|
|
329
329
|
|
|
330
|
-
|
|
330
|
+
<h2></h2>
|
|
331
331
|
|
|
332
332
|
<details>
|
|
333
333
|
<summary><strong><code>gap</code></strong> : <em>Gap between cells.</em></summary><br />
|
|
@@ -355,7 +355,7 @@ npm install morphing-scroll
|
|
|
355
355
|
</ul>
|
|
356
356
|
</details>
|
|
357
357
|
|
|
358
|
-
|
|
358
|
+
<h2></h2>
|
|
359
359
|
|
|
360
360
|
<details>
|
|
361
361
|
<summary><strong><code>padding</code></strong> : <em>Padding for the <code>objectsWrapper</code>.</em></summary><br />
|
|
@@ -394,7 +394,7 @@ npm install morphing-scroll
|
|
|
394
394
|
</ul>
|
|
395
395
|
</details>
|
|
396
396
|
|
|
397
|
-
|
|
397
|
+
<h2></h2>
|
|
398
398
|
|
|
399
399
|
<details>
|
|
400
400
|
<summary><strong><code>contentAlign</code></strong> : <em>Aligns the content when it is smaller than the MorphScroll <code>size</code>.</em></summary><br />
|
|
@@ -428,7 +428,7 @@ npm install morphing-scroll
|
|
|
428
428
|
</ul>
|
|
429
429
|
</details>
|
|
430
430
|
|
|
431
|
-
|
|
431
|
+
<h2></h2>
|
|
432
432
|
|
|
433
433
|
<details>
|
|
434
434
|
<summary><strong><code>elementsAlign</code></strong> : <em>Aligns the objects within the <code>objectsWrapper</code>.</em></summary><br />
|
|
@@ -449,7 +449,7 @@ npm install morphing-scroll
|
|
|
449
449
|
</ul>
|
|
450
450
|
</details>
|
|
451
451
|
|
|
452
|
-
|
|
452
|
+
<h2></h2>
|
|
453
453
|
|
|
454
454
|
<details>
|
|
455
455
|
<summary><strong><code>edgeGradient</code></strong> : <em>Gradient when scrolling overflows.</em></summary><br />
|
|
@@ -482,7 +482,7 @@ npm install morphing-scroll
|
|
|
482
482
|
</ul>
|
|
483
483
|
</details>
|
|
484
484
|
|
|
485
|
-
|
|
485
|
+
<h2></h2>
|
|
486
486
|
|
|
487
487
|
<details>
|
|
488
488
|
<summary><strong><code>progressReverse</code></strong> : <em>Reverse the progress bar position.</em></summary><br />
|
|
@@ -512,7 +512,7 @@ npm install morphing-scroll
|
|
|
512
512
|
</ul>
|
|
513
513
|
</details>
|
|
514
514
|
|
|
515
|
-
|
|
515
|
+
<h2></h2>
|
|
516
516
|
|
|
517
517
|
<details>
|
|
518
518
|
<summary><strong><code>progressVisibility</code></strong> : <em>Visibility of the progress bar.</em></summary><br />
|
|
@@ -538,7 +538,7 @@ npm install morphing-scroll
|
|
|
538
538
|
</ul>
|
|
539
539
|
</details>
|
|
540
540
|
|
|
541
|
-
|
|
541
|
+
<h2></h2>
|
|
542
542
|
|
|
543
543
|
<details>
|
|
544
544
|
<summary><strong><code>objectsWrapFullMinSize</code></strong> : <em>Sets the <code>min-height</code> CSS property of the <code>objectsWrapper</code> to match the height of the MorphScroll.</em></summary><br />
|
|
@@ -562,7 +562,7 @@ npm install morphing-scroll
|
|
|
562
562
|
</ul>
|
|
563
563
|
</details>
|
|
564
564
|
|
|
565
|
-
|
|
565
|
+
<h2></h2>
|
|
566
566
|
|
|
567
567
|
#### PROGRESS AND RENDERING:
|
|
568
568
|
|
|
@@ -605,7 +605,7 @@ npm install morphing-scroll
|
|
|
605
605
|
</ul>
|
|
606
606
|
</details>
|
|
607
607
|
|
|
608
|
-
|
|
608
|
+
<h2></h2>
|
|
609
609
|
|
|
610
610
|
<details>
|
|
611
611
|
<summary><strong><code>render</code></strong> : <em>Types of rendering for optimization.</em></summary><br />
|
|
@@ -658,7 +658,7 @@ npm install morphing-scroll
|
|
|
658
658
|
</ul>
|
|
659
659
|
</details>
|
|
660
660
|
|
|
661
|
-
|
|
661
|
+
<h2></h2>
|
|
662
662
|
|
|
663
663
|
<details>
|
|
664
664
|
<summary><strong><code>emptyElements</code></strong> : <em>Handling of empty scroll elements.</em></summary><br />
|
|
@@ -710,7 +710,7 @@ npm install morphing-scroll
|
|
|
710
710
|
</ul>
|
|
711
711
|
</details>
|
|
712
712
|
|
|
713
|
-
|
|
713
|
+
<h2></h2>
|
|
714
714
|
|
|
715
715
|
<details>
|
|
716
716
|
<summary><strong><code>suspending</code></strong> : <em>Adds React Suspense.</em></summary><br />
|
|
@@ -736,7 +736,7 @@ npm install morphing-scroll
|
|
|
736
736
|
</ul>
|
|
737
737
|
</details>
|
|
738
738
|
|
|
739
|
-
|
|
739
|
+
<h2></h2>
|
|
740
740
|
|
|
741
741
|
<details>
|
|
742
742
|
<summary><strong><code>fallback</code></strong> : <em>Fallback element.</em></summary><br />
|
|
@@ -760,7 +760,7 @@ npm install morphing-scroll
|
|
|
760
760
|
</ul>
|
|
761
761
|
</details>
|
|
762
762
|
|
|
763
|
-
|
|
763
|
+
<h2></h2>
|
|
764
764
|
|
|
765
765
|
### 〈♦ ResizeTracker 〉
|
|
766
766
|
|
|
@@ -808,7 +808,7 @@ npm install morphing-scroll
|
|
|
808
808
|
|
|
809
809
|
</details>
|
|
810
810
|
|
|
811
|
-
|
|
811
|
+
<h2></h2>
|
|
812
812
|
|
|
813
813
|
<details>
|
|
814
814
|
<summary><strong><code>style</code></strong> : <em>Applies inline styles to the container.</em></summary><br />
|
|
@@ -829,7 +829,7 @@ npm install morphing-scroll
|
|
|
829
829
|
|
|
830
830
|
</details>
|
|
831
831
|
|
|
832
|
-
|
|
832
|
+
<h2></h2>
|
|
833
833
|
|
|
834
834
|
<details>
|
|
835
835
|
<summary><strong><code>measure</code></strong> : <em>Defines the measurement strategy.</em></summary><br />
|
|
@@ -861,7 +861,7 @@ npm install morphing-scroll
|
|
|
861
861
|
|
|
862
862
|
</details>
|
|
863
863
|
|
|
864
|
-
|
|
864
|
+
<h2></h2>
|
|
865
865
|
|
|
866
866
|
<details>
|
|
867
867
|
<summary><strong><code>onResize</code></strong> : <em>Callback triggered on size changes.</em></summary><br />
|
|
@@ -890,13 +890,13 @@ npm install morphing-scroll
|
|
|
890
890
|
|
|
891
891
|
</details>
|
|
892
892
|
|
|
893
|
-
|
|
893
|
+
<h2></h2>
|
|
894
894
|
|
|
895
895
|
- ### Link:
|
|
896
896
|
|
|
897
897
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
898
898
|
|
|
899
|
-
|
|
899
|
+
<h2></h2>
|
|
900
900
|
|
|
901
901
|
### 〈♦ IntersectionTracker 〉
|
|
902
902
|
|
|
@@ -919,7 +919,7 @@ npm install morphing-scroll
|
|
|
919
919
|
|
|
920
920
|
</details>
|
|
921
921
|
|
|
922
|
-
|
|
922
|
+
<h2></h2>
|
|
923
923
|
|
|
924
924
|
<details>
|
|
925
925
|
<summary><strong><code>style</code></strong> : <em>Applies inline styles to the container.</em></summary><br />
|
|
@@ -938,7 +938,7 @@ npm install morphing-scroll
|
|
|
938
938
|
|
|
939
939
|
</details>
|
|
940
940
|
|
|
941
|
-
|
|
941
|
+
<h2></h2>
|
|
942
942
|
|
|
943
943
|
<details>
|
|
944
944
|
<summary><strong><code>root</code></strong> : <em>Defines the observation area.</em></summary><br />
|
|
@@ -965,7 +965,7 @@ npm install morphing-scroll
|
|
|
965
965
|
|
|
966
966
|
</details>
|
|
967
967
|
|
|
968
|
-
|
|
968
|
+
<h2></h2>
|
|
969
969
|
|
|
970
970
|
<details>
|
|
971
971
|
<summary><strong><code>rootMargin</code></strong> : <em>Sets the margin around the root element.</em></summary><br />
|
|
@@ -1000,7 +1000,7 @@ npm install morphing-scroll
|
|
|
1000
1000
|
|
|
1001
1001
|
</details>
|
|
1002
1002
|
|
|
1003
|
-
|
|
1003
|
+
<h2></h2>
|
|
1004
1004
|
|
|
1005
1005
|
<details>
|
|
1006
1006
|
<summary><strong><code>threshold</code></strong> : <em>Defines when the callback is triggered.</em></summary><br />
|
|
@@ -1032,7 +1032,7 @@ npm install morphing-scroll
|
|
|
1032
1032
|
|
|
1033
1033
|
</details>
|
|
1034
1034
|
|
|
1035
|
-
|
|
1035
|
+
<h2></h2>
|
|
1036
1036
|
|
|
1037
1037
|
<details>
|
|
1038
1038
|
<summary><strong><code>visibleContent</code></strong> : <em>Makes all elements always visible.</em></summary><br />
|
|
@@ -1056,7 +1056,7 @@ npm install morphing-scroll
|
|
|
1056
1056
|
|
|
1057
1057
|
</details>
|
|
1058
1058
|
|
|
1059
|
-
|
|
1059
|
+
<h2></h2>
|
|
1060
1060
|
|
|
1061
1061
|
<details>
|
|
1062
1062
|
<summary><strong><code>onVisible</code></strong> : <em>Callback function triggered when the element becomes visible.</em></summary><br />
|
|
@@ -1090,13 +1090,13 @@ npm install morphing-scroll
|
|
|
1090
1090
|
|
|
1091
1091
|
</details>
|
|
1092
1092
|
|
|
1093
|
-
|
|
1093
|
+
<h2></h2>
|
|
1094
1094
|
|
|
1095
1095
|
- ### Link:
|
|
1096
1096
|
|
|
1097
1097
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
|
|
1098
1098
|
|
|
1099
|
-
|
|
1099
|
+
<h2></h2>
|
|
1100
1100
|
|
|
1101
1101
|
### 〈♦ API 〉
|
|
1102
1102
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "morphing-scroll",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.17",
|
|
4
4
|
"description": "Library for using various methods of scrolling objects〈♦〉",
|
|
5
5
|
"author": "Georg Schilin",
|
|
6
6
|
"license": "MIT",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"scroll"
|
|
13
13
|
],
|
|
14
14
|
"peerDependencies": {
|
|
15
|
-
"react": ">=16.
|
|
15
|
+
"react": ">=16.8 <20"
|
|
16
16
|
},
|
|
17
17
|
"repository": {
|
|
18
18
|
"type": "git",
|