ikapblog技術関連のメモや調べたことをメモしていきますホーム文字in画像QRIPアドレス確認Javascriptでページの高さの変更をチェックする2021.11.04Javascriptでページ全体の高さを検知する方法2つ。ikapblogのように、目次をハイライトする場合は、ページ内の章節となる各コンテンツの座標を取得・保持しておくために、初期化関数init()を実行しています。初期化後にページ内の章節となるコンテンツのサイズが変わってしまうとハイライト用の関数は古い座標のリストをもとにハイライトの章節を決定してしまいます。このため、ページの章節となるコンテンツのサイズが変わった場合は、もう一度init()を呼ぶなどして、座標リストの更新が必要になります。このサイズ変更時に更新するという処理について考えていきます。ちなみにresizeイベントはウィンドウサイズの変更のイベントなのでこれによる検知はできないことには注意しておきます。この記事内では、init()した後は、update()で(ハイライトなどを)更新することにします。監視対象のエントリを追加resizeObserver.observe(document.body);実は未確認なので少し調整は必要かもしれません。MDNドキュメントによると、循環的な依存関係がある時は、ResizeObserverを利用するべきだそうです。今回は高さを検知して高さを変更するわけではないので、循環的ではないです。対応しているブラウザを確認した上で使用する必要があります。イベントリスナーで高さをチェックするイベントリスナーでupdate()の更新処理をする場合はこの方法が利用できます。update();});clientHeightは頻繁には変わらないので、重くはなりにくいはずです。こちらはExperimentalではないので、幅広いブラウザで使えます。おわりResizeObserverはまだ実用していないので、そのうち使ってみたいと思いました。このくらいの利用方法なら、まだ使うまでもないのかなとも思います。複雑でこれしかないなという時に思いつけるといいなあと思いました。トータルの高さは変わらないで章節個々の高さが同時に変化した場合には対応できていないことには気を配っておきたいです。そんなケースはほぼ無いと思うので実装することはないですが、そういう可能性もあるというのは頭の隅っこに置いておきたいです。動的に生成した要素へのhover()は使えないJavascriptとjQueryで動的コンテンツを作成したい。ぶつかった問題をメモできるものはメモしておく。func)がうまく動作しない。対処法は、jq...Javascriptnodejsのhttp(s)モジュールでリダイレクトを処理するnodejsのhttpモジュールで、リダイレクトをフォローするhttpリクエストを行う。リダイレクトでリクエストし直してくれるモジュールを追加すれば済む話だが、追加しない場合は自分で必要な分だけ実装する。PCで主にWebサイトのGUIを調整していると、スマホなどのタッチスクリーン端末では、違和感が生じたりする。$(docum...JavascriptJavascriptで非インタラクティブなアニメーションを作る冬っぽい雪が降るだけのアニメーションをjavascriptで作った。動いたままになるので、バッテリー残量注意。canvasを直に操作するの...WebサービスWebブラウザ上でmdをhtmlに変換する簡易エディタを作った以前、記事をMarkdownで書いてhtmlに変換してからアップするという流れを作った。bash上でコマンドによりhtmlに変換しているので、bashが操作できる環境でないと、変換作業ができない。最近では、iPadで記事を書...Reactimgタグの画像を切り替えるとき、アスペクト比を維持しつつリサイズする1つのimgタグを使って代わる代わる画像を表示するとき、アスペクト比を維持しつつ枠いっぱいに表示する。リサイズのことを忘れていた。/...AOJのALDS1_1をC++で解いたメモC++でバブルソートコメントコメントを書き込むコメントをどうぞメールアドレスが公開されることはありません。名前メールサイトホームJavascriptikapper主にITなどのアウトプットをしています。ご連絡等はTwitterの@ikapperへ。ikapblog.メニューホーム文字in画像QRIPアドレス確認ホーム検索トップサイドバータイトルとURLをコピーしました。