JavaScript: DOMを活用しよう

スクロールに応じた位置調整

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素の位置を、ウィンドウのスクロールに応じて調整します。
講師:
06:24

字幕

このレッスンでは HTML ドキュメントに表示した要素の位置をウィンドウをスクロールしたとき、そのスクロールに応じて調整したいと思います。作業するページは「 ARTIST 」です。そしてサムネールをクリックすると画面いっぽいにグレーの背景が広がって中央に画像が表示されます。消してまた他の画像をクリックしても同じ様に中央に表示されるんですがただウィンドウをスクロールしてしまいますと全体りページに合わせて移動してしまいます。けれどこれでいったん消してまた違う画像をクリックすると今現在の状況に合わせて中央に表示される。ですから最初は良いんですね、最初は良いんですが後から変えてしまうとダメということなのでこれをスクロールした時にそれに応じて位置を変えるようにしたいと思います。Dreamweaver で HTML ドキュメントを開きました。画像をクリックして最初に表示した時ちゃんとウィンドウの位置に合わせて画像が置かれています。それはあのグレーの背景がdiv 要素なんですがダイナミックに作った div 要素をボディに追加して、その後ですね、ここで左上位置を調整しています。今開いているウィンドウの位置に合わせて設定をしているのでこれできちんと位置が合う訳ですね。 ですからこれをスクロールした時もやればいいということです。同じ処理を書き加えますので、こういう時は関数にした方がいいですね。ですからこの2行はいったんコピーします。その上で関数にしたら関数を呼び出した方がいいのでここはコメントアウトにして関数呼び出しにします。そうすればもと修正が入ったときも全部纏めて関数の中で修正してしまえばいい訳です。関数はまだ定めていないですがここで「 setPosition 」という名前に決めましょう。引数はとくに渡しません。setPosition としました。ではこの setPosition という関数を定義しましょう。ここでオーバーレイ削除の EventListenerの設定がありますがここの後に function としてsetPosition ですね、を定めましょう。引数はないです。そしてこの中にコピーしておいた処理をペーストします。overlay という変数は共通使っていますから大丈夫ですね。さてこれでとくに動作は変更ないはずです。先程と同じ様に動くはずので確認をしておきましょう。ファイルを保存します。では Chrome をリロードします。そして画像をクリックするとちゃんとウィンドウいっぱいに画像が表示されます。 まだスクロールについての処理はやっていまんのでスクロールしてしまうとダメなんですがスクロールした後最初だけはちゃんと位置が調整されていますね。ではスクロールした場合の処理を加えたいと思います。Dreamweaver に戻りましてスクロールのイベントというのはウィンドウに対してaddEventListener します。「 window.addEventListener 」そしてイベントは scroll です。そして今回は setPosition という関数名を定めましたのでListener としてはこの関数をそのままコピーして持っていきます。かっこ閉じって保存しましょう。Chrome をリロードします。そして画像をクリックしてスクロールして見ましょう。スクロールしても画像の位置が変わらないですね。もう一回閉じて。もう1つぐらい別の画像で。大丈夫そうです。もう1行だけ処理を加えます。というのはウィンドウに対してaddEventListener のメソッドで関数を設定しました。そうすると例えばオーバーレイをクリックしてオーバーレイごと画像が消えてしまったときremoveChild で消してしまった時ですね、それでもウィンドウには Listener 関数が残ってしまうですね。 これは何か良からぬことが起こる可能性がありますし、自生してもメモリを無駄に使ってしまいます。ですからオーバーレイを消すときはaddEventListener の逆ですね。removeEventListener で関数の Listener を消してしまうことが必要です。ではこれコピーしてしまってコピーを持ってきます。インデントを一個加えて「 add 」を「 remove 」にすれぱいいです。そして保存します。Chrome をリロードしてここではエラーが出られないかどうか確認しておきましょう。デベロッパーツールを表示します。少しスクロールをして画像をクリックします。そしてもう一回クリックすると消えるととくにエラーは出ないですね。それからこの機会に横スクロールもできる様になりましたので横スクロールをしてもちゃんと画像が位置に大丈夫ですね、中央に表示されています。このレッスンでは要素の位置をウィンドウのスクロールに応じて変えてみました。その場合スクロールのイベントというのはウィンドウに対して addEventListener でスクロールで捉えることが出来ます。そして addEventListener をウィンドウにした場合にはとくに自由なんですがremoveEventListener も忘れない様にしましょう。

JavaScript: DOMを活用しよう

DOM(Document Object Model)はHTMLの中の要素とそのツリー構造を扱うための仕組みです。このコースではJavaScriptの基礎を学んだ方を対象に、DOMの基本的な操作方法について解説します。具体的にはDOMの要素やノードの調べ方、要素の属性の変更、ノードの追加方法などについて説明し、実際にインタラクティブに対応するページを作ります。

3時間24分 (33 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年03月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。