fix(core): fix edge cases where intersection observer doesn't trigger…

… due to rounded value
Grsmto · Aug 17, 2020 · 827d6f6 · 827d6f6
1 parent b19e584
commit 827d6f6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/packages/examples/index.js b/packages/examples/index.js
@@ -8,7 +8,7 @@ import {
 import 'scroll-snap-carousel/dist/styles.css';
 
 const getPageIndex = (index, length, offset) => {
-  return Math.max(0, index - offset);
+  return Math.min(Math.max(0, index - offset), length - offset - 1);
 };
 
 const Examples = () => {

diff --git a/packages/examples/styles.css b/packages/examples/styles.css
@@ -25,7 +25,7 @@ body {
 }
 
 .slide {
-  width: calc(33.33% - ((2 * 100px) / 3));
+  width: calc(33.33% - ((2 * 10vw) / 3));
   flex-shrink: 0;
   height: 100%;
   scroll-snap-align: center;
@@ -38,24 +38,24 @@ body {
 }
 
 .slide:first-child {
-  margin-left: 100px;
+  margin-left: 10vw;
 }
 
 .slide:last-child {
-  margin-right: 100px;
+  margin-right: 10vw;
 }
 
 @media (max-width: 640px) {
   .slide {
-    width: 50%;
+    width: calc(50% - ((2 * 5vw) / 2));
   }
 
   .slide:first-child {
-    margin-left: 50px;
+    margin-left: 5vw;
   }
 
   .slide:last-child {
-    margin-right: 50px;
+    margin-right: 5vw;
   }
 }
 

diff --git a/packages/scroll-snap-carousel/src/getActiveSnap.ts b/packages/scroll-snap-carousel/src/getActiveSnap.ts
@@ -206,7 +206,7 @@ export const getActiveSnap = ({
         entries.forEach((entry) => {
           if (!activeSnapIndex) return;
 
-          if (entry.isIntersecting && entry.intersectionRatio === 1) {
+          if (entry.isIntersecting && entry.intersectionRatio >= 0.99) {
             activeSnapObserver.unobserve(children[activeSnapIndex]);
             activeSnapObserver.observe(children[children.length - 2]);
 
@@ -217,7 +217,7 @@ export const getActiveSnap = ({
       {
         root,
         rootMargin: rootMarginEdges,
-        threshold: [0, 1],
+        threshold: [0, 0.99],
       }
     );