表題通り、viewport幅いっぱいの横スクロールでアイテムの開始位置がコンテンツ幅と揃うやつをCSSで実装します。
コンテンツ幅のボックス内に横スクロールを普通に配置したら普通にボックス内におさまります。
コンテンツ幅のボックス内で手っ取り早くviewport幅いっぱいにするには100vwですが、ウィンドウのスクロールバーがある場合にはみ出しが発生します。それを防ぐ方法としてはjsで document.documentElement.clientWidth を取得、CSS変数にセットして利用する方法などがあります。今回は bodyの直下に container-type: inline-size の要素をかましてスクロールバーを考慮した viewport幅を定義しています。
さらにアイテムの開始位置をコンテンツ幅と揃えるには、左右のパディングを追加します。
scroll-snap-type だけだと
snapの位置がコンテンツ幅に揃わないので、scroll-padding-inline
を追加して調整したいところですが、 margin, padding の %
は親要素の幅に対する割合に対し、scroll-padding の %
は自分自身の幅に対する割合になるため、--offset-x:
calc((var(--client-width) - 100%) / 2) が使えません。
そこで --offset-x を % を使わずに設定する必要があります。