javascript - 水平 CSS 或 Javascript "help scrolling"，使其元素保持全宽

Question

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

现在我的 all-divs 包装器看起来像这样:

    .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 之外的所有浏览器都支持 scroll-snap-align；每个浏览器都支持某种形式的 scroll-snap-type。

您可以利用这一优势。请注意，IE/Edge 支持此属性的版本与其他浏览器略有不同(我知道，我们都感到震惊)，因此如果您想支持它们，则必须使用 vendor 前缀。所以把这个样式放在包装器上:

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