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

date_range 2024/09/09
日々の活動日記エンジニアインターン
松木　智哉
ScrolleHint


こんにちは！

京都開発研究所、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全然わからないので勉強してみます！

    ＊コメント＊

  • 小松　あさみ

    小松　あさみ

    更新日：2024-09-09 18:57

    ＊コメント＊

    以前制作したサイトで、修正の方がこちらと同じアイコンが出るように調整してくださったのですが、やはりすごくわかりやすくて良いと思いました！記事を参考に、私も挑戦してみようと思います！

    ＊コメント＊

  • 黒川　かな

    黒川　かな

    更新日：2024-09-09 19:04

    ＊コメント＊

    お疲れ様です！
    スクロール可能な部分がわかりやすく表示されているとユーザーにとても親切で、良い改修だと思います！
    JSでできるんですね！勉強になりました＾＾

    ＊コメント＊

  • 奥村　優

    奥村　優

    更新日：2024-09-09 19:25

    ＊コメント＊

    自分も今までの制作会社でかなり使用していました！カスタマイズも豊富でいいですよね。
    ガーディアンでも他の方の修正でこれを使用しましたが、とても好評で使い方を教えて欲しいと言われ教えたことがあるので他の人にも機会があれば共有したいと思います！

    ＊コメント＊

  • 下川　春樹

    下川　春樹

    更新日：2024-09-09 19:55

    ＊コメント＊

    お疲れ様です。
    JSのライブラリも使用してもいいんですね。
    使ってもいいものとよくないものがありそうなので、確認して便利なものはどんどん使えるよう触ってみます＞＜b

    ＊コメント＊

  • 高橋　力都

    高橋　力都

    更新日：2024-09-09 21:32

    ＊コメント＊

    お疲れ様です。

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

    ＊コメント＊

  • 星　翼

    星　翼

    更新日：2024-09-09 22:39

    ＊コメント＊

    とても良い実装ですね✨
    閲覧者目線で考えたときに、まずは認知しやすいというのはとても大切ですね！

    ＊コメント＊

  • 恩田 かおり

    恩田 かおり

    更新日：2024-09-10 08:04

    ＊コメント＊

    このマーク！
    お馴染みのやつがjsで実装されていることを知りませんでした。
    深掘りして、仕組みを知るように私も心がけたいと思います。
    いつも情報発信ありがとうございます！

    ＊コメント＊

  • 野村　健人

    野村　健人

    更新日：2024-09-10 08:04

    ＊コメント＊

    自分もScrollHintはよく使っています。簡単に実装できて使い勝手が良いですよね！
    WEBサイトはスマホで見ることが多くなったので、どのコンテンツがスクロールできるのか一目でわかるようにするのは大切ですね！

    ＊コメント＊

  • 宮城　わか

    宮城　わか

    更新日：2024-09-10 08:40

    ＊コメント＊

    ScrollHintは以前教えていただき自分でやってみたことがありますが、とても簡単かつ機能的で良いですよね。ユーザーにとって使いやすくわかりやすいものをどんどん使ったいきたいと思います。

    ＊コメント＊

  • 池田　みはな

    池田　みはな

    更新日：2024-09-10 09:31

    ＊コメント＊

    お疲れ様です。以前同じような動きを実装したことがありますが、想定しなければいけないことが意外と多くて思ったより大変でした。ライブラリを使えば簡単に実装できて便利ですね！

    ＊コメント＊

  • 則岡　えり

    則岡　えり

    更新日：2024-09-10 09:32

    ＊コメント＊

    お疲れ様です。
    ScrollHint、何度か使用したことありますが、とても便利ですよね。
    他にも便利なのあったらぜひ教えてください！

    ＊コメント＊

  • 岡田　のりこ

    岡田　のりこ

    更新日：2024-09-10 09:33

    ＊コメント＊

    ユーザー目線で考えられたとても良い実装ですね！
    JSでできるの知らなかったです！
    いつも勉強になる情報を発信いただきありがとうございます！

    ＊コメント＊

  • 梅村　みづき

    梅村　みづき

    更新日：2024-09-10 09:34

    ＊コメント＊

    お疲れ様です。

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

    ＊コメント＊

  • ZAW　MIN　OO

    ZAW　MIN　OO

    更新日：2024-09-10 10:07

    ＊コメント＊

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

    ＊コメント＊

  • 可信　なみ

    可信　なみ

    更新日：2024-09-10 12:20

    ＊コメント＊

    JavaScriptでそんなことができるんですね✨
    勉強になります！情報発信をありがとうございます✨

    ＊コメント＊

  • 菅谷　たかの

    菅谷　たかの

    更新日：2024-09-10 12:42

    ＊コメント＊

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

    ＊コメント＊

  • 水野　健太

    水野　健太

    更新日：2024-09-11 09:34

    ＊コメント＊

    ScroollHint手軽でいいですよね！自分も積極的に取り入れようと案件で使ったりしています。
    iPnoheだと表示されないなどちょこっと把握できてない動作があるので色々つかって検証してみます。

    ＊コメント＊

  • 大橋　秀一郎

    大橋　秀一郎

    更新日：2024-09-11 19:25

    ＊コメント＊

    横スクロールできるサイトを見る機会があまり無いからでしょうか、一閲覧者としてはページを開いて反射的に上下スクロールだけするようになっています。横スクロールしようなどと考えていないので、横スクロールできると教えてくれる機能はありがたいです！
    閲覧者にとって親切な機能は、どんどん活用していきたいですね！

    ＊コメント＊

＊コメント＊

＊ログイン＊

メールアドレス
パスワード
このメンバーの記事一覧へ 一覧へ戻る

NEW