CSS 或 Javascript 水平“幫助滾動”，使其項目保持全寬

Question

有沒有辦法讓動畫滾動“自動”？，每個滾動都保持一個元素全寬。 我喜歡有案例 B 。 使用“自動”，我的意思是它可以幫助您滾動防止案例 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;
}