スクロールを見逃させない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 18:57
＊コメント＊

以前制作したサイトで、修正の方がこちらと同じアイコンが出るように調整してくださったのですが、やはりすごくわかりやすくて良いと思いました！記事を参考に、私も挑戦してみようと思います！
以前制作したサイトで、修正の方がこちらと同じアイコンが出るように調整してくださったのですが、やはりすごくわかりやすくて良いと思いました！記事を参考に、私も挑戦してみようと思います！
＊コメント＊
黒川　かな
更新日：2024-09-09 19:04
＊コメント＊

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

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

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

お疲れ様です。この「スクロール出来ますよ！」のやつ、あると非常に分かりやすいですよね。逆に無いと「えぇ…スクロール出来そうでできへん…」ってなったりします。ライブラリの共有も、ありがとうございます！
お疲れ様です。

この「スクロール出来ますよ！」のやつ、あると非常に分かりやすいですよね。
逆に無いと「えぇ…スクロール出来そうでできへん…」ってなったりします。
ライブラリの共有も、ありがとうございます！
＊コメント＊
星　翼
更新日：2024-09-09 22:39
＊コメント＊

とても良い実装ですね✨ 閲覧者目線で考えたときに、まずは認知しやすいというのはとても大切ですね！
とても良い実装ですね✨
閲覧者目線で考えたときに、まずは認知しやすいというのはとても大切ですね！
＊コメント＊
恩田かおり
更新日：2024-09-10 08:04
＊コメント＊

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

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

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

ユーザー目線で考えられたとても良い実装ですね！ JSでできるの知らなかったです！いつも勉強になる情報を発信いただきありがとうございます！
ユーザー目線で考えられたとても良い実装ですね！
JSでできるの知らなかったです！
いつも勉強になる情報を発信いただきありがとうございます！
＊コメント＊
梅村　みづき
更新日：2024-09-10 09:34
＊コメント＊

お疲れ様です。私もスクロールを見逃してしまうことがあるので、その記述を追加するだけでユーザーにとってわかりやすくなるなら、どんどん使っていきたいですね！
お疲れ様です。

私もスクロールを見逃してしまうことがあるので、その記述を追加するだけでユーザーにとってわかりやすくなるなら、どんどん使っていきたいですね！
＊コメント＊
ZAW　MIN　OO
更新日：2024-09-10 10:07
＊コメント＊

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

JavaScriptでそんなことができるんですね✨ 勉強になります！情報発信をありがとうございます✨
JavaScriptでそんなことができるんですね✨
勉強になります！情報発信をありがとうございます✨
＊コメント＊
菅谷　たかの
更新日：2024-09-10 12:42
＊コメント＊

そういう機能を付けられるのは初めて知りました。閲覧者にとても親切ですね！
そういう機能を付けられるのは初めて知りました。閲覧者にとても親切ですね！
＊コメント＊