css - How to slow down inertia/momentum scrolling on mobile

Question

I am working on a scrollable card gallery of sorts. For this I am using a CSS grid structure. Something along the line of:

<div class="cs-wrapper">
    <div class="cs-container">
        <div id="card-1" class="cs-card-container">
            <div class="cs-card">
            </div>
        </div>
        <div id="card-2" class="cs-card-container">
            <div class="cs-card">
            </div>
        </div>
        ...
    </div>
</div>

Using the css

.cs-content {
    height:100vh;
    position: relative;

    display: grid;
    grid-template-columns: var(--cs-container-grid-gap) 1fr var(--cs-container-grid-gap);
    grid-gap: var(--container-grid-gap);
    z-index:10;
}
.cs-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(--cs-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;
}

.cs-container > div {   
    height: 100%;
    width: 100%;
    position: relative;
    margin:0;
    overflow: auto;

    scroll-snap-align: start;
}
.cs-card-container {
    height: 100%;
    width: 100%;
    position: relative;
    margin:0;
    overflow: auto;
}

Now the code works as intended, the cards are positioned right and the scroll works.

However the inertia/momentum scrolling on mobile tends to scroll a bit to fast, when scrolling on mobile you have to swipe very sensibly to get to the next card and not skip 1 or 2 cards (you have to be able to swipe trough multipe cards if you'd wish to, so a stop on each card isn't an option).

Now I am looking for a way to slow down the scroll speed so it becomes usable

I'd prefer a CSS only solution if possible. Things I have tried:

Playing around with

.cs-container {
  perspective: 1px;
  transform-style: preserve-3d;
}
.cs-container > div {   
  transform: translateZ(-1px) scale(2);
  margin-top:-10px;
  margin-left:-10px;
  top:-10px;
}

this did seem to slow the scroll down a bit, however the scroll acted unpredictable and as the divs are now in the background and scroll half as fast. as soon as cs-container has scrolled to the end only half the cards have been scrolled through (also the scroll snapp is now off by half a card)

Javascript

I tried a couple javascript solutions I found, but all of them relied on the scrolling being done with the mousewheel, so for mobile this didn't work

Answer 1

Did not run the code myself, but it sounds like you are looking for the property called:

{scroll-snap-stop: always}