Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

webサイトを作成しようと思っているのですが、実装したい機能名がわからず詰まってしまっています。

解決したいこと

現在webサイトを作成しようと考えているのですが、機能名と実装方法の検討がついて居らず、詰まってしまっています。
実装したい内容は以下二つになります。

円形スライド

image.png

・やりたいこと

右側の画面でスクロールをするとマルチダイヤルのようにカチカチとスライドしていき、
中と半端なところで止まらず、速度が落ちたところでカチッと止まるスライド。
スライドして赤枠内に止まった内容を左のエリアに登録していた情報を表示させたい。

縦形スライド

image.png

・やりたいこと

右側の画面でスクロールをするとマルチダイヤルのようにカチカチとスライド(上下に)していき、
中と半端なところで止まらず、速度が落ちたところでカチッと止まるスライド。
スライドして赤枠内に止まった内容を左のエリアに登録していた情報を表示させたい。

自分で調べた内容

「マルチダイヤル js」
「カチカチスクロール js」
「list スライダー js」
「年表 スライダー js」
、、、等々で検索してみてはいるのですが一向に見つかりません。
半年前くらいから機能が気になり調べてはいたのですが、今回本格的に実装したいと思い再度調べてみたのですが、
調べ方がわからず、詰まってしまいました。
こちらの機能名、実装方法をご存じの方がいらっしゃいましたら教えていただけますと幸いです。

最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。

0 likes

2Answer

スクロールが要素単位でカチッと止まるようにするには CSS の scroll-snap-* プロパティが使えます。

より詳細に制御したいなら CSS ではなく JS を使うことになると思います。方法は「js scroll snap」で検索すれば色々と出てきます。

2Like

ChatGPTにそれっぽい画面を作ってもらって、それをベースにしてみるのもいいかもしれません。
もちろん、やりたいことが完全に達成されたコードが生成されることは少ないでしょうが参考にはなるかと思います。

例えば以下は質問文の画像とプロンプトから作ってもらったコードを少し修正したサンプルです。
cssを見ると、scroll-snap-typeを利用していますね。

私自身は生成されたコードの中身をちゃんと読んでいないので、このサンプルのコードについて質問されても回答できません。

# 依頼
この画面サンプルの主に右側のHTML+JavaScriptを書いてください。

## 要件
- 左側には現在選択中の駅名が表示されます。
- 右側には選択できる駅リストが表示されます。上下にいくつも駅名が続いているものとします。
- 右側の画面でスクロールをするとマルチダイヤルのようにカチカチとスライド(上下に)していくようにしたいです。
- 駅名が書かれていない中途半端な場所で止まらないようにする必要があります。
- スライドして赤枠内に止まった駅名を左側に表示させたいです。

See the Pen 駅選択 by culage (@culage) on CodePen.

1Like

Your answer might help someone💌