coders-club / src /components /ScrollStack.css
kumar-aditya's picture
Upload 108 files
a7b8df9 verified
.scroll-stack-scroller {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: visible;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: scroll-position;
}
.scroll-stack-inner {
padding: 0;
min-height: 100vh;
}
.scroll-stack-card-wrapper {
position: relative;
}
.scroll-stack-card {
transform-origin: top center;
will-change: transform;
backface-visibility: hidden;
transform-style: flat;
box-shadow: none;
min-height: 100vh;
width: 100%;
margin: 0;
padding: 0;
border-radius: 0;
box-sizing: border-box;
-webkit-transform: translateZ(0);
transform: translateZ(0);
position: relative;
overflow: hidden;
contain: layout style paint;
isolation: isolate;
}
.scroll-stack-end {
width: 100%;
height: 200px;
}
/* Mobile optimizations */
@media (max-width: 768px) {
.scroll-stack-scroller {
-webkit-overflow-scrolling: touch;
scroll-snap-type: y proximity;
}
.scroll-stack-card {
will-change: auto;
transform-style: flat;
box-shadow: none;
scroll-snap-align: start;
}
.scroll-stack-end {
height: 100px;
}
}
/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
.scroll-stack-card {
box-shadow: none;
}
.scroll-stack-end {
height: 150px;
}
}
/* Desktop enhancements */
@media (min-width: 1025px) {
.scroll-stack-card {
will-change: transform;
box-shadow: none;
}
.scroll-stack-end {
height: 300px;
}
}
/* Performance optimization for reduced motion */
@media (prefers-reduced-motion: reduce) {
.scroll-stack-scroller {
scroll-behavior: auto;
}
.scroll-stack-card {
will-change: auto;
transform: none !important;
filter: none !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.scroll-stack-card {
box-shadow: none;
border: 1px solid rgba(255, 255, 255, 0.1);
}
}