@cocreate/scroll 1.3.2 → 1.3.3
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/CHANGELOG.md +7 -0
- package/demo/index.html +6 -8
- package/package.json +1 -1
- package/src/index.js +24 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [1.3.3](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.3.2...v1.3.3) (2022-06-18)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* fix scroll event loop ([59f6998](https://github.com/CoCreate-app/CoCreate-scroll/commit/59f6998d5c4f562584efa3b64793381a3e49ebe6))
|
|
7
|
+
|
|
1
8
|
## [1.3.2](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.3.1...v1.3.2) (2022-06-17)
|
|
2
9
|
|
|
3
10
|
|
package/demo/index.html
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.scrolling {
|
|
43
|
-
background-color:
|
|
43
|
+
background-color: rgb(226, 31, 210);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
|
|
@@ -62,13 +62,12 @@
|
|
|
62
62
|
<!-- Navbar -->
|
|
63
63
|
<div class="display:flex flex-wrap:wrap justify-content:space-between flex-direction:row padding-top:10px padding-bottom:10px width:100% nav"
|
|
64
64
|
content_id="content"
|
|
65
|
-
scroll="hidden, sticky-nav"
|
|
66
|
-
scrolling="scrolling"
|
|
67
65
|
scroll-top="scroll_top"
|
|
68
|
-
scroll-limbo="scroll_limbo"
|
|
69
66
|
scroll-bottom="scroll_bottom"
|
|
67
|
+
scroll="hidden, sticky-nav"
|
|
70
68
|
scroll-up="10"
|
|
71
|
-
scroll-down="5"
|
|
69
|
+
scroll-down="5"
|
|
70
|
+
>
|
|
72
71
|
|
|
73
72
|
<!--<a href="#" class="logo">Navbar</a>-->
|
|
74
73
|
<div class="margin:0px_15px display:flex flex-wrap:wrap justify-content:space-between flex-direction:row align-items:center width:100%">
|
|
@@ -106,7 +105,7 @@
|
|
|
106
105
|
</div>
|
|
107
106
|
</div>
|
|
108
107
|
</div>
|
|
109
|
-
<section class="padding-top:80px padding-bottom:40px
|
|
108
|
+
<section class="padding-top:80px padding-bottom:40px" scroll scrolling="scrolling">
|
|
110
109
|
<div class=" max-width:90% margin:0px_auto">
|
|
111
110
|
<div class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
|
|
112
111
|
<div class="flex-grow:1 min-width:300px width:50%">
|
|
@@ -122,7 +121,7 @@
|
|
|
122
121
|
</div>
|
|
123
122
|
</div>
|
|
124
123
|
</section>
|
|
125
|
-
<section class="bg-light-gray padding:25px_0px">
|
|
124
|
+
<section class="bg-light-gray padding:25px_0px" scroll scroll-limbo="scroll_limbo">
|
|
126
125
|
<div class="max-width:90% margin:0px_auto">
|
|
127
126
|
<div class="padding:25px_0px display:flex flex-wrap:wrap justify-content:space-between flex-direction:row align-items:center">
|
|
128
127
|
<div class="padding:0px_10px">
|
|
@@ -227,7 +226,6 @@
|
|
|
227
226
|
</div>
|
|
228
227
|
|
|
229
228
|
|
|
230
|
-
<!--<script src="../dist/CoCreate-selected.js"></script>-->
|
|
231
229
|
<script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
|
|
232
230
|
|
|
233
231
|
</body>
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -3,7 +3,8 @@ import observer from '@cocreate/observer';
|
|
|
3
3
|
const CoCreateScroll = {
|
|
4
4
|
delta: 3,
|
|
5
5
|
observer: null,
|
|
6
|
-
|
|
6
|
+
timer: null,
|
|
7
|
+
firedEvents: new Map(),
|
|
7
8
|
|
|
8
9
|
init: function() {
|
|
9
10
|
let elements = document.querySelectorAll(`[scroll]`);
|
|
@@ -48,18 +49,20 @@ const CoCreateScroll = {
|
|
|
48
49
|
el.scrollStatus = { currentPos: 0 };
|
|
49
50
|
});
|
|
50
51
|
|
|
51
|
-
this.__runScrollEvent(element, scrollInfo);
|
|
52
|
+
// this.__runScrollEvent(element, scrollInfo);
|
|
52
53
|
|
|
53
54
|
let scrollableElements;
|
|
54
55
|
if (scrollSelector)
|
|
55
56
|
scrollableElements = document.querySelectorAll(scrollSelector);
|
|
56
57
|
|
|
57
58
|
if (scrollableElements) {
|
|
58
|
-
for (let scrollableEl of scrollableElements)
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
for (let scrollableEl of scrollableElements) {
|
|
60
|
+
scrollableEl.addEventListener('scroll', function(event) {
|
|
61
|
+
self._scrollEvent(elements, element, scrollInfo, scrollableEl)
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
} else{
|
|
65
|
+
// this.WindowInit = true;
|
|
63
66
|
window.addEventListener('scroll', function(event) {
|
|
64
67
|
self._scrollEvent(elements, element, scrollInfo)
|
|
65
68
|
});
|
|
@@ -84,8 +87,9 @@ const CoCreateScroll = {
|
|
|
84
87
|
}
|
|
85
88
|
|
|
86
89
|
elements.forEach((el) => {
|
|
87
|
-
self.__runScrollEvent(el, scrollInfo, scrollableEl);
|
|
88
90
|
self.__setScrolling(el, scrollInfo, false);
|
|
91
|
+
// self.__runScrollEvent(el, scrollInfo, scrollableEl);
|
|
92
|
+
|
|
89
93
|
});
|
|
90
94
|
|
|
91
95
|
timer = setTimeout(function() {
|
|
@@ -93,6 +97,18 @@ const CoCreateScroll = {
|
|
|
93
97
|
self.__setScrolling(el, scrollInfo, true);
|
|
94
98
|
});
|
|
95
99
|
}, 500);
|
|
100
|
+
|
|
101
|
+
if (!self.firedEvents.has(element)) {
|
|
102
|
+
self.firedEvents.set(element, element)
|
|
103
|
+
elements.forEach((el) => {
|
|
104
|
+
self.__runScrollEvent(el, scrollInfo, scrollableEl);
|
|
105
|
+
});
|
|
106
|
+
setTimeout(function() {
|
|
107
|
+
self.firedEvents.delete(element)
|
|
108
|
+
// clearTimeout(eventTimer)
|
|
109
|
+
}, 300);
|
|
110
|
+
}
|
|
111
|
+
|
|
96
112
|
},
|
|
97
113
|
|
|
98
114
|
__initIntersectionObserver: function() {
|