Test replace scroll-based to inview

src/app.css

@@ -894,6 +894,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   text-shadow: 0 1px var(--bg-color);
 }
 .status-carousel > ul {
+  --carousel-gap: 16px;
   display: flex;
   overflow-x: auto;
   overflow-y: clip;
@@ -901,7 +902,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   scroll-behavior: smooth;
   margin: 0;
   padding: 8px 16px;
-  gap: 16px;
+  gap: var(--carousel-gap);
   align-items: flex-start;
   counter-reset: index;
   min-height: 160px;
@@ -926,6 +927,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .status-carousel > ul > li:is(:empty, :has(> a:empty)) {
   display: none;
 }
+.status-carousel .status-carousel-beacon {
+  margin-right: calc(-1 * var(--carousel-gap));
+  pointer-events: none;
+  opacity: 0;
+
+  ~ .status-carousel-beacon {
+    margin-left: calc(-1 * var(--carousel-gap));
+  }
+}
 /*
   Assume that browsers that do support inline-size property also support container queries.
   https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills

src/components/timeline.jsx

@@ -698,18 +698,18 @@ function StatusCarousel({ title, class: className, children }) {
   // });
   const startButtonRef = useRef();
   const endButtonRef = useRef();
-  useScrollFn(
-    {
-      scrollableRef: carouselRef,
-      direction: 'horizontal',
-      init: true,
-    },
-    ({ reachStart, reachEnd }) => {
-      if (startButtonRef.current) startButtonRef.current.disabled = reachStart;
-      if (endButtonRef.current) endButtonRef.current.disabled = reachEnd;
-    },
-    [],
-  );
+  // useScrollFn(
+  //   {
+  //     scrollableRef: carouselRef,
+  //     direction: 'horizontal',
+  //     init: true,
+  //   },
+  //   ({ reachStart, reachEnd }) => {
+  //     if (startButtonRef.current) startButtonRef.current.disabled = reachStart;
+  //     if (endButtonRef.current) endButtonRef.current.disabled = reachEnd;
+  //   },
+  //   [],
+  // );
   // useEffect(() => {
   //   init?.();
   // }, []);
@@ -749,7 +749,22 @@ function StatusCarousel({ title, class: className, children }) {
           </button>
         </span>
       </header>
-      <ul ref={carouselRef}>{children}</ul>
+      <ul ref={carouselRef}>
+        <InView
+          class="status-carousel-beacon"
+          onChange={(inView) => {
+            if (startButtonRef.current)
+              startButtonRef.current.disabled = inView;
+          }}
+        />
+        {children}
+        <InView
+          class="status-carousel-beacon"
+          onChange={(inView) => {
+            if (endButtonRef.current) endButtonRef.current.disabled = inView;
+          }}
+        />
+      </ul>
     </div>
   );
 }