CSS 或 Javascript "help scrolling" 水平，保持其项目为全宽

Question

有没有办法制作动画滚动 "automatic" ？每次滚动都保持一个元素的全宽。我想拥有 case B 。使用 "automatic" 我的意思是它可以帮助您滚动防止 情况 A（除非您仍在按下屏幕，但是当您松开手指或鼠标时它会自动滚动它你根据接近 divs 显示的百分比）

现在我的全部 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 支持此属性的版本与其他浏览器略有不同（我知道，我们都感到震惊）所以如果你想支持它们，你将不得不使用供应商前缀。所以把这个样式放在包装器上：

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

CSS 或 Javascript "help scrolling" 水平，保持其项目为全宽

CSS or Javascript "help scrolling" horizontally, keeping its items at full width

html

javascript

css

mobile-website