スクロールコメントを書く※本記事のプログラムは2018年2月14日に修正しました。プログラムを組む感覚を取り戻そうとしています、網干です。期間ですがプログラムから離れていたら、もうGoogleさんに頼らないと組めない頭になっていました。これじゃイカンということで、勘を取り戻すためにもちょっとしたプログラムを組んでご紹介します。今回はJavaScriptを使用してスクロールの位置を取得し続けて、ちょっとした処理を行う方法をご紹介します。適切なスクロール位置で適切なコンテンツを出すことでユーザビリティの向上もスクロールの位置を取得または設定する方法スクロール位置はonscrollイベントで取得します。onscrollイベントに関しての詳しい説明は下記のサイト様でうまくまとめられていますのでご参照ください。要するにwindow.onscrollのイベントに処理を追加しましょう、という事ですね。onscrollイベントが発生した際にdocument.documentElement.scrollTopを確認することで、オブジェクトのスクロール位置が取得できます。document.documentElement.scrollTopは値の参照だけでなく代入もできるので、スクロールの位置を設定したい場合は値を入力することで設定もできるようです。実際に、onscrollイベントに処理を追加してスクロール位置を監視しながら何らかの処理をさせてみましょう。スクロール量が特定の位置に達したら何かしらの処理を行う上記を意識してコードを組んでみました。具体的には下記のようなコードになります。(※本記事にもコードを仕込んでおります。画面の右下にスクロール量を表示して、特定のスクロール量に達すると大魔神が降臨します。--></script>各処理の解説は全てコードのコメントに記載しています。画面上で見るとなかなか手の込んだ仕組みをしていそうですが、コードを見ると意外と短くてすっきりしていますね。onscrollイベント内の処理はもう少し最適化できそうですが...。画像の切り替えや文言の変更は毎回入力する必要はないので、切り替えのタイミングのみで処理をさせたいですね。if分岐が増えてしまいそうなのが気になるので、今回はこのまま処理をさせることにしました。適切なスクロール位置で適切なコンテンツを出すことでユーザビリティの向上もいかがでしたか?最近、様々なサイトで特定のスクロール位置で何かを表示するようなギミックをよく見かけます。動きがあって面白いサイトなのですが、見えないコンテンツはGoogleの評価的にはどうなのだろうと気になってしまいます。参考:展開ボタンやタブに隠れたコンテンツは無視され検索結果の対象にならないかもしれないですが、うまく作りこんであるサイトは、スクロールに合わせて目次が追従したり、他の記事への紹介を自然に挟みこんできたりと、「便利だなぁ」と感心することもありました。ユーザーが便利だと思えるようなコンテンツは必ず評価の対象になると思うので、そういったコンテンツをもっと作っていきたいですね。!この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。裕介Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。2019年6月28日ほかの投稿も読んでみませんか?2019.04.26WordPressの子テーマの作り方!3つのファイルですぐにできる♪カスタマイズ後編2015.05.31Gmailの新しい受信トレイ「Inbox」が使いやすいので移行をオススメします!2017.03.30Word(ワード)表の罫線の削除と引き方をおさらい!【初心者向けワード講座】2016.01.08【Illustrator】バレンタインに手作りカード!1分でできるイラストレーターでのハートの描き方2019.09.27【Word(ワード)】題名や文章を縦横真ん中にする方法を紹介します!2016.04.01【Photoshop】インクループ社長が髪を切ったようです。2017.07.21A型看板やバックボード、大判ポスター印刷などを展開している株式会社ラックス様のWEBサイト運営のお手伝いをさせていただきました。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。現代のマーケティング課題を解決する資格セミナーを行っているマーケティングリテラシー協会様のLPを作成いたしました。Animateを利用したアニメーションを作ってみる。Nature様のHPを制作させていただきました!2017-6-28読んでみようかな?と思うのは手書きチラシ!一友ビルドテック様のチラシを制作させていただきました。株式会社imacocoe様のWEBサイトを作成させていただきました。ホームページ制作、WEBマーケティングページ上部へ戻る。