Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 7x 7x 7x 61x 12x 12x 18x | import { Box, styled } from "@mui/material";
const FADE = "40px";
const FadingScrollTrack = styled(Box, {
shouldForwardProp: (prop) =>
prop !== "$canScrollLeft" &&
prop !== "$canScrollRight" &&
prop !== "$gap" &&
prop !== "$snapType",
})<{
$canScrollLeft?: boolean;
$canScrollRight?: boolean;
$gap?: number;
$snapType?: "x mandatory" | "x proximity";
}>(({
$canScrollLeft,
$canScrollRight,
$gap = 16,
$snapType = "x mandatory",
}) => {
const mask =
$canScrollLeft && $canScrollRight
? `linear-gradient(to right, transparent, black ${FADE}, black calc(100% - ${FADE}), transparent)`
: $canScrollLeft
? `linear-gradient(to right, transparent, black ${FADE})`
: $canScrollRight
? `linear-gradient(to left, transparent, black ${FADE})`
: undefined;
return {
display: "flex",
gap: `${$gap}px`,
overflowX: "auto",
scrollSnapType: $snapType,
scrollbarWidth: "none",
"&::-webkit-scrollbar": { display: "none" },
...(mask ? { maskImage: mask, WebkitMaskImage: mask } : {}),
};
});
export default FadingScrollTrack;
|