← 一覧へ

やってみよう右端の「あかさたな」を押すか、上下になぞってみてください

スクロールマイナー(知る人ぞ知る)

インデックススクロール(あかさたな)

Section Index Scroller

長い一覧の右端に「あかさたな…」が縦に並び、押したりなぞったりすると、その行まで一気に飛ぶ。

別名索引バーあいうえおインデックスアルファベットインデックスファストスクロール

どこで使われている?

よく見かける場所
iPhone の連絡先、音楽アプリのアーティスト一覧、都道府県・駅名の選択
使うとよい場面
名前順に並んだ、とても長い一覧
避けたい場面
項目が少ない一覧、名前順ではない一覧

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「インデックススクロール(あかさたな)(Section Index Scroller)」を実装してください。

動き:頭文字ごとに見出しで区切った長い一覧の右端に、頭文字を縦に並べた細いバーを置く。押した・なぞった頭文字の見出しまで一覧をすぐに移動させ、今の頭文字を画面中央に大きく表示する。

使う部品:右端のバーで pointermove を見て scrollIntoView(自作)
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら右端のバーで pointermove を見て scrollIntoView(自作)
iPhoneアプリならList の .listSectionIndexVisible(または UITableView の sectionIndexTitles)
Androidアプリなら標準部品なし(LazyColumn + 自作のバー)
Flutterならazlistview パッケージ
React NativeならSectionList + 自作のバー