Buxfix for startIndex (#324)

* bugfix: to fix the start index in the pagination and simplefied the `#handleScrollStart()` so that it also works in Safari

* Using requestAnimationFrame allows you to calculate the scroll position after the browser has finished processing all layout and style updates, ensuring that offsetLeft returns the correct value.

Author: rol4nd909

carousel/carousel.css

@@ -18,11 +18,11 @@ NICE TO HAVE:
   --_carousel-gutters: max(4rem, calc((100% - var(--_carousel-item-size)) / 2));
   --_carousel-scrollbar-gutter: var(--size-6);
   --_carousel-pagination-size: var(--size-8);
-  
+
   display: grid;
   grid-template-columns: [carousel-gutter] var(--_carousel-gutters) 1fr [carousel-gutter] var(--_carousel-gutters);
-  grid-template-rows: 
-    [carousel-scroller] 1fr 
+  grid-template-rows:
+    [carousel-scroller] 1fr
     [carousel-pagination] var(--_carousel-pagination-size);
 
   &:focus-visible {
@@ -78,13 +78,13 @@ NICE TO HAVE:
 :where(.gui-carousel--scroller) {
   grid-row: 1;
   grid-column: 1/-1;
-  
+
   display: grid;
   grid-auto-columns: 100%;
   grid-auto-flow: column;
   align-items: center;
   gap: var(--_carousel-gutters);
-  
+
   padding-block: var(--size-2) var(--_carousel-scrollbar-gutter);
   overflow-x: auto;
   overscroll-behavior-x: contain;
@@ -201,7 +201,7 @@ NICE TO HAVE:
 :where(.gui-carousel--pagination) {
   grid-column: 1/-1;
   place-self: center;
-  
+
   display: grid;
   grid-auto-flow: column;
   gap: var(--size-2);
@@ -253,9 +253,4 @@ NICE TO HAVE:
 @keyframes gui-carousel--control-keypress {
   0%  { outline-offset: 5px }
   50% { outline-offset: 0; }
-}
-
-@keyframes carousel-scrollstart {
-  from { scroll-snap-align: center }
-  to   { scroll-snap-align: unset }
 }

carousel/carousel.js

@@ -193,7 +193,7 @@ export default class Carousel {
     // each snap needs some a11y love
     this.elements.snaps.forEach((snapChild, index) => {
       this.hasIntersected.add({
-        isIntersecting: index === 0,
+        isIntersecting: index === startIndex,
         target: snapChild,
       })
 
@@ -210,17 +210,14 @@ export default class Carousel {
       const itemIndex = this.elements.root.getAttribute('carousel-start')
       const startElement = this.elements.snaps[itemIndex - 1]
 
-      this.elements.snaps.forEach(snap =>
-        snap.style.scrollSnapAlign = 'unset')
+      requestAnimationFrame(() => {
+        const scrollPos = startElement.offsetLeft
 
-      startElement.style.scrollSnapAlign = null
-      startElement.style.animation = 'carousel-scrollstart 1ms'
-
-      startElement.addEventListener('animationend', e => {
-        startElement.style.animation = null
-        this.elements.snaps.forEach(snap =>
-          snap.style.scrollSnapAlign = null)
-      }, {once: true})
+        this.elements.scroller.scrollTo({
+          left: scrollPos,
+          behavior: 'instant',
+        })
+      })
     }
   }