スクロールをヘッダメニューで表現する「scroll-function」ライブラリ

2020年3月30日

テクノロジー プログラミング

ユゲタです。 「スクロール」とかけまして、 「小学校の校長先生の朝礼挨拶」と、ときます。 そのココロは・・・ 長くなると飽きられます。

スクロールはWEBページの基本概念

以前仕事で構築した、javascriptによるWEBページの解析システムで、 インターネットwebサイトのスクロールは、「あまり縦に長くないほうがいい」とされている結果がでましたが、 最近では、ページ上部メニューにより、ハッシュタグ(#contentsなど)によるページ移動で、実際に縦長なのだけれど、画面下部までアクセスがあるUIなどの構築もでてきて、 スクロールによるページ管理が重要であることが分かってきました。 要するにこれまで、「ページの下の方って見られないよね」と言われていたのに、必要な内容が書かれていることをファーストビューで表示してあれば、ちゃんと見られるという事なんですね。 でも、ページのスクロールが膨大に長いと知るとユーザーが少しモチベーションが下がってしまうという心理要因もあるので、非常に悩ましいところなのですが、 これを払拭できるかどうかわからないけど、いっそのことスクロール機能を、これまでのブラウザ右側の縦スクロールから、固定ヘッダによる横スクロールに切り替えて、progressっぽくしてみてはどうかというアイデアがあったので、実際にライブラリを作ってみました。

ライブラリ「Scroll Function」

fixedによる、固定ヘッダを扱っているページで利用することができるんですが、そうでないページでは、画面上部固定で「スクロール進捗バー」が表示されます。 ライブラリのソース一式は、Githubにアップしておきました。 https://github.com/yugeta/scroll_function

使い方

ライブラリの中にあるsampleフォルダを真似してもらうといいのですが、以下のようにセットします。 ... <head> ... <script src='scroll_function/src/main.js'></script> </head> <body> ... <script> new $$scroll_function({ scrollbar_target : "#header_block", scrollbar_color : "green" }); </script> </body> </html> "scrollbar_target"は、fixedのヘッダ要素のselectorを記述してください。 ちなみに、position:Fixedになっていない場合は、ページ上部にへばりつくようになります。 "scrollbar_color"は、色指定ができます。 ページの背景色などに溶け込まない目立つ色を指定してください。 デフォルトは、"#00F"にしてあります。 画面イメージは以下のとおりです。 ついでに、画面上部のスクロールprogresのバーをクリックすると、その位置までスクロールをしてくれる機能も入れてあります。

今後の予定

scrollMagicというjavascriptライブラリがありますが、scroll位置に応じた色々なアクションが設定できます。 もっと簡易にこれと同じ処理をしたい時に、使える機能を構築する予定です。 スクロールのつまみをつけることで、通常のスクロールバーを表示しなくても、スクロールをコントロールできるようになります。 画面要素を"overflow:hidden;"で運用することも可能になりますね。 そんな感じでスクロールマーケティングも今後活性化していく事になることを想定して、ライブラリをアップデートしていきたいですね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。