css - 如何减慢移动设备上的惯性/动量滚动答案

【问题标题】：css - How to slow down inertia/momentum scrolling on mobilecss - 如何减慢移动设备上的惯性/动量滚动
【发布时间】：2021-08-26 03:12:30
【问题描述】：

我正在开发一个可滚动的卡片库。为此，我使用了 CSS 网格结构。类似的东西：

<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>

使用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;
}

现在代码按预期工作，卡片定位正确，滚动正常。

但是，移动设备上的惯性/动量滚动往往会滚动得有点快，在移动设备上滚动时，您必须非常明智地滑动才能到达下一张卡片，而不是跳过 1 或 2 张卡片（您必须能够滑动如果您愿意，可以使用多张卡片，因此不能在每张卡片上停止）。

现在我正在寻找一种方法来减慢滚动速度，以便它变得可用

如果可能，我更喜欢纯 CSS 的解决方案。我尝试过的事情：

玩弄

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

这似乎确实减慢了滚动速度，但是滚动的行为不可预测，因为 div 现在在后台并且滚动速度减半。一旦 cs-container 滚动到最后只有一半的卡片已经滚动（滚动 snapp 现在也关闭了半张卡片）

Javascript

我尝试了几个我找到的 javascript 解决方案，但它们都依赖于使用鼠标滚轮完成的滚动，因此对于移动设备这不起作用

【问题讨论】：

您可以查看overscroll-behavior，但没有您正在寻找的微调行为；它似乎是打开或关闭:(。

标签： html css scroll

【解决方案1】：

没有自己运行代码，但听起来你正在寻找名为的属性：

{scroll-snap-stop: always}

【讨论】：

【解决方案2】：

您可以对元素使用{scroll-behavior: smooth;} 以获得更平滑的滚动。
记住：当在根元素上指定此属性时，它会改为应用于视口。在 body 元素上指定的此属性不会传播到视口。

【讨论】：

【解决方案3】：

有一个属性：-webkit-overflow-scrolling: auto。

值auto 应该禁用基于动量的滚动。这意味着当您将手指从触摸屏上移开时，内容会立即停止滚动。

注意：不幸的是，目前只有少数浏览器支持此属性。相反，您也可以在.cs-wrapper 元素上使用overflow:hidden 属性，并恢复正常的滚动行为，您可以将<div> 绝对定位在元素内部以使用overflow:auto 向后滚动。我认为这是仅使用 css 的最佳选择！

【讨论】：