Q&A
おそらく、IntersectionObserverクラスの初期化メソッド（constructer）内で起きてるエラーです。
IntersectionObserverの内容は掲示可能ですか？？
また、ライブラリのドキュメントなどを見て、初期化時の引数に与える値が正しいかどうか再度ご確認ください。
InterSection ObserverAPIでフロートヘッダーを作りたいのですが、
「Failed to construct 'IntersectionObserver': The provided double value is non-finite.」
というエラーが出て機能しません。
non-finiteとは「有限でない」という意味に解釈し、
コードを見る限りfiniteな箇所はなくしたつもりなのですが・・・。
以下、HTMLとJSのコードです。
<!DOCTYPE html> <html> <head> <title>float header</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> <div class="header"> ヘッダー </div> <div class="box box1"> サンプル1 </div> <div class="box box2"> サンプル2 </div> <div class="box box3"> サンプル3 </div> <div class="box box1"> サンプル4 </div> </div> <script src="src/index.js"></script> </body> </html>
import "./styles.css"; const $header = document.querySelector(".header"); // ヘッダーのDOMを取得 const options = { root: null, rootMargin: 0, threshold: "300px" //thresholdはどのくらいの交差割合でコールバック関数が呼ばれるかの設定値 // 300pxの交差でwatchHeaderが実行される }; const observer = new IntersectionObserver(watchHeader, options); // 第一引数に交差した時に行う関数を定義 observer.observe($header); // observerでヘッダーを監視 function watchHeader(entry) { if (entry.isIntersecting) { entry.target.classList.add("is-float"); // is-floatでposition: fixed;を付与 } } コード
お手数かけますが、お気づきの点あればアドバイスお願いします。
回答1件
0
ベストアンサー
Intersection Observer API を読んでみました。
第二引数に与える options は
- root: ビューポートとして使用される要素
- margin: cssのmargin 表記となる文字列
- threshold: コールバックを発火するタイミング指定
01の数値なら１回発火、 01 の少数値を配列要素とする配列の場合は各々のタイミングで発火
という形にすべきではないでしょうか？
投稿2019/11/26 08:09
編集2019/11/26 08:10
総合スコア5434
遅くなりましてすみません、仰る通りthresholdの値を0~1の間で設定したら実装できました！
MDNを読めば分かる内容でしたね、申し訳ありません。
的確なアドバイス、ありがとうございました！
解決できて良かったです。
使ったことのないAPIでしたので、私も勉強になりましたよ。
あなたの回答
tips
プレビュー
