やってみよう画面の中を下にスクロールしてみてください
スクロールマイナー（知る人ぞ知る）
縦スクロールで横に進む
Horizontal Scroll Section
下にスクロールしているのに、ある場所で画面が止まり、中のカードが横に流れていく。流れ終わるとまた下へ進む。
別名横スクロールセクションスクロールジャック縦スクロールで横移動ピン留めして横に流す
どこで使われている？
- よく見かける場所
- ブランドサイト・製品紹介サイト（Apple など）、ポートフォリオ、LPの実績紹介
- 使うとよい場面
- 作品や特徴を、順番に印象的に見せたいとき
- 避けたい場面
- 情報を早く探したいページ（思った通りに動かずイライラする）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「縦スクロールで横に進む（Horizontal Scroll Section）」を実装してください。 動き：セクションを画面に固定（sticky）し、縦にスクロールした量に合わせて、中の横長の列を左へ動かす。横に流れ終わったら固定を外し、ふつうの縦スクロールに戻す。 使う部品：position: sticky ＋ スクロール量で translateX（GSAP ScrollTrigger など）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | position: sticky ＋ スクロール量で translateX（GSAP ScrollTrigger など） |
|---|---|
| iPhoneアプリなら | ScrollView の onScrollGeometryChange で自作 |
| Androidアプリなら | 自作（nestedScroll） |
| Flutterなら | 自作（ScrollController の値で横に動かす） |
| React Nativeなら | 自作（Animated.event の scrollY で横に動かす） |