質問: リンク内容 ↑Airbnbのサイト模写をしています。(HTML,CSS,bootstrap) 「ホスティングで実現する、自分らしいライフスタイル」下にある、 「横スクロールすると、その下の丸印○○が黒色になる(連動している)」というデザインを作りたいです。 どのように連動しているか知りたくて、デベロッパーツールで確認した所、このようなコードでした。 ・○○部分 ``` ``` ・スクロール部分 ``` ホスティングで広がる可能性 柔軟な働き方を楽しみながら、ホスティングをとおして、好きなことをもっとするための収入アップや長く続く友情関係にめぐりあう機会を得てみませんか。 ホスティングの世界を知ろう 安心のホスティング 24時間365日対応サポート、頼れるホストコミュニティからツールのカスタム設定、ヒント・実践アドバイスのご提供まで、Airbnbが全力でホストの成功をサポートします。 Airbnbによるホストのサポート体制 ``` 質問があります。 1これはどのような考え方でしょうか。(大まかで大丈夫です、調べます) 2これ以外の考え方などありますでしょうか。 今、スクロールバー無しの横スクロール画面と、丸印ができましたが、連動の仕方が分かりません。よろしくお願いします。
回答: 1 `overflow-x: scroll`ではみ出した子要素を横スクロールで表示できるようにし、`scrollbar-width: none`でスクロールバーを見えなくし、`scroll-snap-type: x mandatory`でスクロール位置のスナップをしていると思います。 スクロールの制御はJavaScriptでしょう。 ドットの方は、クラスを入れ替えてるだけですね。 2 スライダーのライブラリを見てみると参考になると思いますが、1の方法と、`transform: translateX`でスライドさせる方法の2種類が多いのではないかな、と思います。