I have been working on creating a scrollable card gallery using a CSS grid layout. The structure I am following is similar to this:
<div class="gallery-wrapper">
<div class="gallery-container">
<div id="card-1" class="gallery-card-container">
<div class="gallery-card">
</div>
</div>
<div id="card-2" class="gallery-card-container">
<div class="gallery-card">
</div>
</div>
...
</div>
</div>
With the corresponding CSS styling as follows:
.gallery-content {
height:100vh;
position: relative;
display: grid;
grid-template-columns: var(--gallery-container-grid-gap) 1fr var(--gallery-container-grid-gap);
grid-gap: var(--container-grid-gap);
z-index:10;
}
.gallery-container {
display: grid;
position: relative;
grid-gap: 0vw;
grid-template-columns:repeat(auto-fill, 100vw);
grid-auto-flow: column;
grid-auto-columns: calc( 100% / var(--gallery-cards-per-screen));
grid-template-rows: 1fr;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
overflow-scrolling: touch;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.gallery-container > div {
height: 100%;
width: 100%;
position: relative;
margin:0;
overflow: auto;
scroll-snap-align: start;
}
.gallery-card-container {
height: 100%;
width: 100%;
position: relative;
margin:0;
overflow: auto;
}
The code works correctly with the cards positioned as intended and the scrolling functionality functioning properly.
However, I have noticed that the inertia/momentum scrolling on mobile devices is too fast. It requires a very sensitive swipe to navigate between cards without skipping one or two in between.
I am now seeking a way to adjust the scroll speed to make it more user-friendly. If possible, I would like to find a solution using only CSS. Some approaches I have tried so far include:
Experimenting with
.gallery-container {
perspective: 1px;
transform-style: preserve-3d;
}
.gallery-container > div {
transform: translateZ(-1px) scale(2);
margin-top:-10px;
margin-left:-10px;
top:-10px;
}
While this did help slow down the scrolling speed slightly, it also caused unpredictable behavior where the cards appeared to be in the background and scrolled at half the normal rate. Additionally, when the container reached the end of the scroll, only half of the cards had been navigated through (disrupting the scroll snapping by half a card).
Javascript
I experimented with several JavaScript solutions I found, but they were all focused on mousewheel scrolling, making them incompatible with mobile devices.