記事の詳細

プログラムを組む感覚を取り戻そうとしています、網干です。

少しの期間ですがプログラムから離れていたら、もうGoogleさんに頼らないと組めない頭になっていました。
これじゃイカンということで、勘を取り戻すためにもちょっとしたプログラムを組んでご紹介します。

今回はJavaScriptを使用してスクロールの位置を取得し続けて、ちょっとした処理を行う方法をご紹介します。

うまく活用すればサイトのユーザービリティの向上にも役立つかもしれません!

スクロールの位置を取得または設定する方法

スクロール位置はonscrollイベントで取得します。

onscrollイベントに関しての詳しい説明は下記のサイト様でうまくまとめられていますのでご参照ください。
onscrollイベント
スクロールの位置(量)を取得・設定

要するにwindow.onscrollのイベントに処理を追加しましょう、という事ですね。

onscrollイベントが発生した際にdocument.documentElement.scrollTopを確認することで、オブジェクトのスクロール位置が取得できます。
また、document.documentElement.scrollTopは値の参照だけでなく代入もできるので、スクロールの位置を設定したい場合は値を入力することで設定もできるようです。

では実際に、onscrollイベントに処理を追加してスクロール位置を監視しながら何らかの処理をさせてみましょう。

スクロール位置を監視して何かしらの処理をさせるサンプルコード

今回作成したコードは…
1. スクロール量を常に取得して表示
2. スクロール量が特定の位置に達したら何かしらの処理を行う
上記を意識してコードを組んでみました。

具体的には下記のようなコードになります。
(※本記事にもコードを仕込んでおります。画面の右下にスクロール量を表示して、特定のスクロール量に達すると大魔神が降臨します。クリックして撃破しましょう!)

スクロール量が
0pxを突破!

各処理の解説は全てコードのコメントに記載しています。

画面上で見るとなかなか手の込んだ仕組みをしていそうですが、コードを見ると意外と短くてすっきりしていますね。
onscrollイベント内の処理はもう少し最適化できそうですが…。

特に、画像の切り替えや文言の変更は毎回入力する必要はないので、切り替えのタイミングのみで処理をさせたいですね。
ただ、if分岐が増えてしまいそうなのが気になるので、今回はこのまま処理をさせることにしました。

適切なスクロール位置で適切なコンテンツを出すことでユーザビリティの向上も

いかがでしたか?

最近、様々なサイトで特定のスクロール位置で何かを表示するようなギミックをよく見かけます。
動きがあって面白いサイトなのですが、見えないコンテンツはGoogleの評価的にはどうなのだろうと気になってしまいます。
参考:展開ボタンやタブに隠れたコンテンツは無視され検索結果の対象にならないかもしれない

ですが、うまく作りこんであるサイトは、スクロールに合わせて目次が追従したり、他の記事への紹介を自然に挟みこんできたりと、「便利だなぁ」と感心することもありました。
ユーザーが便利だと思えるようなコンテンツは必ず評価の対象になると思うので、そういったコンテンツをもっと作っていきたいですね。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る