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

user_12194013 0
Viewed 1304

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

scroll css html
3 Answers

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

{scroll-snap-stop: always}

user_167367120

You can use {scroll-behavior: smooth;} to the element for a smoother scroll.
Remember : When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.

Admin1

There is a property: -webkit-overflow-scrolling: auto.

The value auto should disable momentum-based scrolling. This means that the content stops scrolling immediately when you remove your finger from the touchscreen.

Note: Unfortunately, this property is currently supported by only a few browsers. Instead you could also use the overflow:hidden propery on the .cs-wrapper element, and to get back the normal scrolling behavior, you can position a <div> absolutely inside of the element to get scrolling back with overflow:auto. I think this is the best option using only css!

user_164903810
Related