【JS】横幅が違う場合の縦スクロールで横スクロール

前回実装した縦スクロールで横スクロールされるコンテンツの、各コンテンツの横幅が違う場合の実装をしてみました

https://zenn.dev/nami_06063/articles/4982d2703e6340

https://codepen.io/mdvlzqqm-the-lessful/pen/dyEWzrO

CSSの実装

横幅が均等の時はjsでwidthを設定しましたが、バラバラなのでCSSで設定します。

JSの実装

x方向への移動量を、1つ目の要素の横幅を引いた値を設定します。こうしておかないと、スクロールし終えた時に表示されるコンテンツが何も無くなって、空白が表示されてしまうからです。