this repo has no description
Test replace scroll-based to inview
+39
-14
+11
-1
src/app.css
+11
-1
src/app.css
···
894
894
text-shadow: 0 1px var(--bg-color);
895
895
}
896
896
.status-carousel > ul {
897
+
--carousel-gap: 16px;
897
898
display: flex;
898
899
overflow-x: auto;
899
900
overflow-y: clip;
···
901
902
scroll-behavior: smooth;
902
903
margin: 0;
903
904
padding: 8px 16px;
904
-
gap: 16px;
905
+
gap: var(--carousel-gap);
905
906
align-items: flex-start;
906
907
counter-reset: index;
907
908
min-height: 160px;
···
925
926
}
926
927
.status-carousel > ul > li:is(:empty, :has(> a:empty)) {
927
928
display: none;
929
+
}
930
+
.status-carousel .status-carousel-beacon {
931
+
margin-right: calc(-1 * var(--carousel-gap));
932
+
pointer-events: none;
933
+
opacity: 0;
934
+
935
+
~ .status-carousel-beacon {
936
+
margin-left: calc(-1 * var(--carousel-gap));
937
+
}
928
938
}
929
939
/*
930
940
Assume that browsers that do support inline-size property also support container queries.
+28
-13
src/components/timeline.jsx
+28
-13
src/components/timeline.jsx
···
698
698
// });
699
699
const startButtonRef = useRef();
700
700
const endButtonRef = useRef();
701
-
useScrollFn(
702
-
{
703
-
scrollableRef: carouselRef,
704
-
direction: 'horizontal',
705
-
init: true,
706
-
},
707
-
({ reachStart, reachEnd }) => {
708
-
if (startButtonRef.current) startButtonRef.current.disabled = reachStart;
709
-
if (endButtonRef.current) endButtonRef.current.disabled = reachEnd;
710
-
},
711
-
[],
712
-
);
701
+
// useScrollFn(
702
+
// {
703
+
// scrollableRef: carouselRef,
704
+
// direction: 'horizontal',
705
+
// init: true,
706
+
// },
707
+
// ({ reachStart, reachEnd }) => {
708
+
// if (startButtonRef.current) startButtonRef.current.disabled = reachStart;
709
+
// if (endButtonRef.current) endButtonRef.current.disabled = reachEnd;
710
+
// },
711
+
// [],
712
+
// );
713
713
// useEffect(() => {
714
714
// init?.();
715
715
// }, []);
···
749
749
</button>
750
750
</span>
751
751
</header>
752
-
<ul ref={carouselRef}>{children}</ul>
752
+
<ul ref={carouselRef}>
753
+
<InView
754
+
class="status-carousel-beacon"
755
+
onChange={(inView) => {
756
+
if (startButtonRef.current)
757
+
startButtonRef.current.disabled = inView;
758
+
}}
759
+
/>
760
+
{children}
761
+
<InView
762
+
class="status-carousel-beacon"
763
+
onChange={(inView) => {
764
+
if (endButtonRef.current) endButtonRef.current.disabled = inView;
765
+
}}
766
+
/>
767
+
</ul>
753
768
</div>
754
769
);
755
770
}