本記事では、Studioの追従位置を利用してコンテンツが左方向に重なりながらスクロールするレイアウトを実装する手順をご紹介します。
通常の横スクロールと同じように実装すると右端の要素が重ならない
親ボックスを横スクロール設定にして、中の要素に追従位置を指定するだけでは、右端の要素が最後まで重ならない問題が発生します（画像の上段）。
この問題を回避するために一番右端の親ボックスの横幅を100%にします。
実装手順
リストを作成し、<ul>に横スクロールを設定
<li>のボックスの配置は左寄せにする
<li>を追従位置にして、左辺から0pxにする
リストにブール値プロパティを追加
一番右端のアイテム<li>を選択
画面右上の条件付きスタイルでブール値を選択
ボックスの横幅を100%に変更
「位置」を左辺から0pxにするのを忘れないように注意してください。
リストのプロパティとレイヤー構造は以下の通りです。
一番右端のアイテムだけ横幅100%＋左寄せに設定できていると、下図のような状態になります。一番右端の親ボックスの横幅だけ長いことが確認できます。
レイヤーパネル上部のリストデータのブール値の表示が、見た目上は「ON」になっていても内部データ的に「ON」になっていないことがあるため（＝プレビューに反映されない状況）、一度「OFF」にしてから再度「ON」にすると確実です。
追従位置を使うとマージンを設定できなくなるため、要素の間隔はギャップを使用します。リストの場合は<ul>にギャップを設定することになります。
現時点では不具合か仕様か明らかではありませんが、<li>の横幅はpx指定にする必要があり、％やVWにしていると上記の設定を行っていても最後まで重ねることができません。エディタ上ではうまく設定できているように表示されますが、プレビューでは異なる見た目となってしまいます（<li>に条件付きスタイル時の横幅100%が効いていない判定になる）。
そのため横幅に%を使用したい場合はリストを使わない組み方にする必要があります。
リスト化することで、CMSデータとの接続もできるようになります。CMSで使う場合はモデル内にブール値プロパティを追加し、ブール値が「ON」の時に横幅が100%になるように設定すればOKです。
最後に2つが並ぶ形にしたい場合は横幅50%を指定
要素が完全に重なるのではなく、2枚並ぶ形で終わるようにしたいときは<li>のボックスの横幅を50%にすれば実現できます。この場合、ブール値は必要ありません。
謝辞
「最後の要素の横幅を100%にすれば良い」という山下さんの投稿を参考に、本記事の実装方法にたどり着くことができました。ありがとうございました。
