スクロールを見逃させないScrollHint

2024/09/09

日々の活動日記エンジニアインターン

こんにちは！

京都開発研究所、Webプログラマコースの長期インターン生、松木智哉です！！

Webサイトを閲覧しているときに、コンテンツが横にスクロールできることに気づくのが遅れてしまうこと、ありませんか？自分は、「あ、ここもスクロールできるんだ！」と後から気づくことがよくあります！

今日はそのようなコンテンツを含むパーツの作成を行いました！！

ここで、用いたのがJavaScriptライブラリ「ScrollHint」です！！

メインビジュアルにあるものが、ScrollHintで出力したものです！

ScrollHint は、スクロール可能なコンテンツがビューポートに表示されたときにアイコンを表示し、ユーザーにスクロールの存在を示すための軽量な JavaScript ライブラリです！！これにより、ユーザーはコンテンツがスクロール可能であることを視覚的に認識しやすくなります！

基本的には、ライブラリをインポートしてJavaScriptとして以下のコードを書くだけです！

new ScrollHint('.scroll-container');

ScrollHintは様々なカスタマイズがあるのでこれから勉強していきたいです！
-----------------------------------------------
G!FIT公式Instagram：https://www.instagram.com/gfit_gdn/
G!FIT公式Twitter：https://twitter.com/gfit_gdn
メンバー紹介ページ：https://guardian.jpn.com/member/tomoya_matsuki/

＊COMMENT＊

芹原　まなみ
更新日：2024-09-09 18:04
＊コメント＊

JSでそんなこともできちゃうんですね！「横スクロールできます」のテキストで案内しかしたことなかったので、見る方にとても親切ですね。 JS全然わからないので勉強してみます！
JSでそんなこともできちゃうんですね！「横スクロールできます」のテキストで案内しかしたことなかったので、見る方にとても親切ですね。
JS全然わからないので勉強してみます！
＊コメント＊
黒川　かな
更新日：2024-09-09 19:04
＊コメント＊

お疲れ様です！スクロール可能な部分がわかりやすく表示されているとユーザーにとても親切で、良い改修だと思います！ JSでできるんですね！勉強になりました＾＾
お疲れ様です！
スクロール可能な部分がわかりやすく表示されているとユーザーにとても親切で、良い改修だと思います！
JSでできるんですね！勉強になりました＾＾
＊コメント＊
奥村　優
更新日：2024-09-09 19:25
＊コメント＊

自分も今までの制作会社でかなり使用していました！カスタマイズも豊富でいいですよね。ガーディアンでも他の方の修正でこれを使用しましたが、とても好評で使い方を教えて欲しいと言われ教えたことがあるので他の人にも機会があれば共有したいと思います！
自分も今までの制作会社でかなり使用していました！カスタマイズも豊富でいいですよね。
ガーディアンでも他の方の修正でこれを使用しましたが、とても好評で使い方を教えて欲しいと言われ教えたことがあるので他の人にも機会があれば共有したいと思います！
＊コメント＊
下川　春樹
更新日：2024-09-09 19:55
＊コメント＊

お疲れ様です。 JSのライブラリも使用してもいいんですね。使ってもいいものとよくないものがありそうなので、確認して便利なものはどんどん使えるよう触ってみます＞＜b
お疲れ様です。
JSのライブラリも使用してもいいんですね。
使ってもいいものとよくないものがありそうなので、確認して便利なものはどんどん使えるよう触ってみます＞＜b
＊コメント＊
恩田　かおり
更新日：2024-09-10 08:04
＊コメント＊

このマーク！お馴染みのやつがjsで実装されていることを知りませんでした。深掘りして、仕組みを知るように私も心がけたいと思います。いつも情報発信ありがとうございます！
このマーク！
お馴染みのやつがjsで実装されていることを知りませんでした。
深掘りして、仕組みを知るように私も心がけたいと思います。
いつも情報発信ありがとうございます！
＊コメント＊
宮城　わか
更新日：2024-09-10 08:40
＊コメント＊

ScrollHintは以前教えていただき自分でやってみたことがありますが、とても簡単かつ機能的で良いですよね。ユーザーにとって使いやすくわかりやすいものをどんどん使ったいきたいと思います。
ScrollHintは以前教えていただき自分でやってみたことがありますが、とても簡単かつ機能的で良いですよね。ユーザーにとって使いやすくわかりやすいものをどんどん使ったいきたいと思います。
＊コメント＊
則岡　えり
更新日：2024-09-10 09:32
＊コメント＊

お疲れ様です。 ScrollHint、何度か使用したことありますが、とても便利ですよね。他にも便利なのあったらぜひ教えてください！
お疲れ様です。
ScrollHint、何度か使用したことありますが、とても便利ですよね。
他にも便利なのあったらぜひ教えてください！
＊コメント＊
ZAW MIN OO
更新日：2024-09-10 10:07
＊コメント＊

特に業などに対し、よくやっていることですね。表のスクロールはアイコンなどで表示させないと、知らなかった可能性が高いためですね。頑張ってください。
特に業などに対し、よくやっていることですね。
表のスクロールはアイコンなどで表示させないと、知らなかった可能性が高いためですね。頑張ってください。
＊コメント＊