@glitchr/stickyjs 1.0.30 → 1.0.32
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/package.json +1 -1
- package/src/css/index.css +2 -2
- package/src/js/sticky.js +46 -28
package/package.json
CHANGED
package/src/css/index.css
CHANGED
|
@@ -70,11 +70,11 @@ html { scroll-behavior: unset !important; }
|
|
|
70
70
|
opacity:0;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
.sticky-autoscroll
|
|
73
|
+
/* .sticky-autoscroll
|
|
74
74
|
{
|
|
75
75
|
max-height: 100vh;
|
|
76
76
|
max-width: 100vw;
|
|
77
|
-
}
|
|
77
|
+
} */
|
|
78
78
|
|
|
79
79
|
|
|
80
80
|
.sticky-swipehint:not(.sticky-swipehint-reveal) .sticky-swipehint-container { display:none; }
|
package/src/js/sticky.js
CHANGED
|
@@ -74,7 +74,7 @@ $.fn.isScrollableX = function() {
|
|
|
74
74
|
var hasScrollableContent = el.scrollWidth > el.clientWidth;
|
|
75
75
|
|
|
76
76
|
var overflowStyle = window.getComputedStyle(el).overflowX;
|
|
77
|
-
var isOverflowScroll = overflowStyle.indexOf('scroll') !== -1;
|
|
77
|
+
var isOverflowScroll = overflowStyle.indexOf('scroll') !== -1 || overflowStyle.indexOf('auto') !== -1;
|
|
78
78
|
|
|
79
79
|
return hasScrollableContent && (isOverflowScroll || isDom);
|
|
80
80
|
|
|
@@ -90,7 +90,7 @@ $.fn.isScrollableY = function() {
|
|
|
90
90
|
var hasScrollableContent = el.scrollHeight > el.clientHeight;
|
|
91
91
|
|
|
92
92
|
var overflowStyle = window.getComputedStyle(el).overflowY;
|
|
93
|
-
var isOverflowScroll = overflowStyle.indexOf('scroll') !== -1;
|
|
93
|
+
var isOverflowScroll = overflowStyle.indexOf('scroll') !== -1 || overflowStyle.indexOf('auto') !== -1;
|
|
94
94
|
|
|
95
95
|
return hasScrollableContent && (isOverflowScroll || isDom);
|
|
96
96
|
|
|
@@ -416,6 +416,7 @@ $.fn.serializeObject = function () {
|
|
|
416
416
|
|
|
417
417
|
event.target = $(event.target);
|
|
418
418
|
event.target = $(event.target).isScrollable() ? event.target : $(event.target).closestScrollable();
|
|
419
|
+
|
|
419
420
|
if(event.target.length == 0) return event;
|
|
420
421
|
|
|
421
422
|
if ($(event.target).prop("user-scroll") === undefined)
|
|
@@ -935,49 +936,61 @@ $.fn.serializeObject = function () {
|
|
|
935
936
|
var classList = e.target.length ? e.target[0].classList : [];
|
|
936
937
|
classList.forEach(function(className) {
|
|
937
938
|
|
|
938
|
-
|
|
939
|
+
target = e.target[0] == $("html")[0] ? window : e.target[0];
|
|
940
|
+
if(!(target in trigger)) trigger[target] = {};
|
|
939
941
|
|
|
940
|
-
var regex = /sticky-scrollpercent(?:-(from|every|once)){0,1}-(\d+)(udlr){0,1}/gi;
|
|
942
|
+
var regex = /sticky-scrollpercent(?:-(from|every|once)){0,1}-(\d+)([udlr]){0,1}/gi;
|
|
941
943
|
if( (match = regex.exec(className)) ) {
|
|
942
944
|
|
|
943
945
|
var scrollTrigger = match[1] || "every";
|
|
944
|
-
|
|
945
|
-
var scrollDir = match[3] ||
|
|
946
|
+
var scrollPercent = parseInt(match[2]);
|
|
947
|
+
var scrollDir = match[3] || undefined;
|
|
946
948
|
if(scrollDir == "u") scrollDir = "up";
|
|
947
949
|
if(scrollDir == "d") scrollDir = "down";
|
|
948
950
|
if(scrollDir == "l") scrollDir = "left";
|
|
949
951
|
if(scrollDir == "r") scrollDir = "right";
|
|
950
952
|
|
|
951
|
-
var scrollPercent = parseInt(match[2]);
|
|
952
|
-
if(scrollDir == "up" || scrollDir == "left") scrollPercent = 100-scrollPercent;
|
|
953
953
|
|
|
954
|
-
if((e.scrollX.direction !== undefined && e.scrollX.delta) ||
|
|
954
|
+
if((e.scrollX.direction !== undefined && e.scrollX.delta) || e.scrollX.percent == 100 || e.scrollX.percent == 0) {
|
|
955
|
+
|
|
956
|
+
var scrollDirX = scrollDir == undefined ? "right" : scrollDir;
|
|
957
|
+
if(scrollDirX == "right" || scrollDirX == "left") {
|
|
958
|
+
|
|
959
|
+
var scrollPercentX = scrollDirX == "left" ? 100-scrollPercent : scrollPercent;
|
|
955
960
|
|
|
956
|
-
|
|
957
|
-
if(scrollTrigger == "from" && scrollDir == e.scrollX.direction && e.scrollX.percent >= scrollPercent)
|
|
958
|
-
e.target[0].dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:0, dir:scrollDir, percent:scrollPercent}}));
|
|
959
|
-
if(scrollTrigger == "once" && scrollDir == e.scrollX.direction && e.scrollX.percent >= scrollPercent && trigger[e.target[0]][className])
|
|
960
|
-
e.target[0].dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:1, dir:scrollDir, percent:scrollPercent}}));
|
|
961
|
+
if(!(className in trigger[target])) trigger[target][className] = true;
|
|
961
962
|
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
963
|
+
if(scrollTrigger == "from" && scrollDirX == e.scrollX.direction && e.scrollX.percent >= scrollPercentX)
|
|
964
|
+
target.dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:0, dir:scrollDirX, percent:scrollPercentX}}));
|
|
965
|
+
if(scrollTrigger == "once" && scrollDirX == e.scrollX.direction && e.scrollX.percent >= scrollPercentX && trigger[target][className])
|
|
966
|
+
target.dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:1, dir:scrollDirX, percent:scrollPercentX}}));
|
|
966
967
|
|
|
967
|
-
|
|
968
|
+
if(scrollTrigger == "every" && scrollDirX == e.scrollX.direction && e.scrollX.percent < scrollPercentX )
|
|
969
|
+
trigger[target][className] = true;
|
|
970
|
+
if(scrollTrigger == "every" && scrollDirX == e.scrollX.direction && e.scrollX.percent >= scrollPercentX && trigger[target][className])
|
|
971
|
+
target.dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:2, dir:scrollDirX, percent:scrollPercentX}}));
|
|
972
|
+
|
|
973
|
+
trigger[target][className] = (scrollTrigger == "every" && e.scrollX.percent < scrollPercentX);
|
|
974
|
+
}
|
|
968
975
|
}
|
|
969
976
|
|
|
970
|
-
if((e.scrollY.direction !== undefined && e.scrollY.delta) ||
|
|
977
|
+
if((e.scrollY.direction !== undefined && e.scrollY.delta) || e.scrollY.percent == 100 || e.scrollY.percent == 0) {
|
|
978
|
+
|
|
979
|
+
var scrollDirY = scrollDir == undefined ? "down" : scrollDir;
|
|
980
|
+
if(scrollDirY == "up" || scrollDirY == "down") {
|
|
981
|
+
|
|
982
|
+
var scrollPercentY = scrollDirY == "up" ? 100-scrollPercent : scrollPercent;
|
|
971
983
|
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
984
|
+
if(!className in trigger[target]) trigger[target][className] = true;
|
|
985
|
+
if(scrollTrigger == "from" && scrollDirY == e.scrollY.direction && e.scrollY.percent >= scrollPercentY)
|
|
986
|
+
target.dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:0, dir:scrollDirY, percent:scrollPercentY}}));
|
|
987
|
+
if(scrollTrigger == "once" && scrollDirY == e.scrollY.direction && e.scrollY.percent >= scrollPercentY && trigger[target][className])
|
|
988
|
+
target.dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:1, dir:scrollDirY, percent:scrollPercentY}}));
|
|
989
|
+
if(scrollTrigger == "every" && scrollDirY == e.scrollY.direction && e.scrollY.percent >= scrollPercentY && trigger[target][className])
|
|
990
|
+
target.dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:2, dir:scrollDirY, percent:scrollPercentY}}));
|
|
979
991
|
|
|
980
|
-
|
|
992
|
+
trigger[target][className] = (scrollTrigger == "every" && e.scrollY.percent < scrollPercentY);
|
|
993
|
+
}
|
|
981
994
|
}
|
|
982
995
|
}
|
|
983
996
|
|
|
@@ -1470,6 +1483,7 @@ $.fn.serializeObject = function () {
|
|
|
1470
1483
|
if(!Settings.ready) return;
|
|
1471
1484
|
|
|
1472
1485
|
// Overscroll detection
|
|
1486
|
+
// NB: This might be improved by using an hashtable[target]
|
|
1473
1487
|
var overscroll = {top:false, right:false, bottom:false, left:false};
|
|
1474
1488
|
overscroll.top = Sticky.overscrollTop(e);
|
|
1475
1489
|
overscroll.bottom = Sticky.overscrollBottom(e);
|
|
@@ -1663,6 +1677,10 @@ $.fn.serializeObject = function () {
|
|
|
1663
1677
|
if(Sticky.get("scrollpercent"))
|
|
1664
1678
|
{
|
|
1665
1679
|
$(el).on('scrolldelta.sticky.percent', Sticky.onScrollPercent);
|
|
1680
|
+
$(".sticky-scrollpercent").each(function() {
|
|
1681
|
+
if(el == this) return;
|
|
1682
|
+
$(this).on('scrolldelta.sticky.percent', Sticky.onScrollPercent);
|
|
1683
|
+
});
|
|
1666
1684
|
}
|
|
1667
1685
|
|
|
1668
1686
|
// Sticky autoscroll
|