CSS 或 Javascript 水平“帮助滚动”，使其项目保持全宽

Question

有没有办法让动画滚动“自动”？每次滚动都保持一个元素全宽。我喜欢有 case B 。对于“自动”，我的意思是它可以帮助您防止 case A 滚动（除非您仍在按下屏幕，但是当您松开手指或鼠标时，它会根据百分比自动为您滚动显示的附近 div)

现在我的所有 div 包装器看起来像这样：

    .scrolling-wrapper {
         overflow-x: scroll;
         overflow-y: hidden;
         white-space: nowrap;
    }

每个 div 像：

.card {
    display: inline-block;
     width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
  }

Answer 1

这就是 CSS 滚动捕捉的用途；不幸的是，它并非在所有地方都得到完全支持。 Chrome 和 Opera 是唯一支持 scroll-snap-stop 的浏览器；除 IE 和 Edge 之外的所有浏览器都支持滚动对齐；并且每个浏览器都支持某种形式的滚动捕捉类型。

您可以利用它来发挥自己的优势。请注意，IE/Edge 支持的此属性版本与其他浏览器略有不同（我知道，我们都很震惊）所以如果你想支持它们，你必须使用供应商前缀。所以把这个样式放在包装器上：

.scrolling-wrapper {
    scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: mandatory;
}