scrollイベントに依存しないリスニングposition:stickey要素の状態変化

需要シーンを想像します.トップページfeedストリームは、文章がモジュールであり、文章が滑り出す過程で文章タイトルの釘を位置決めする必要があります.同僚はタイトルと内容を区別するために、タイトルにシャドウ効果を加える必要があります.トップページと似ています.DEMO scrollイベントを傍受することによってこの機能を実現することができ、スクロールコールバック中のgetBoundingClientRectは要素位置を検出してシャドウの表示状態を判断する.これで実現できますが、とても優雅ではありません.ページにロードされるコンテンツが多くなると、リフローとパフォーマンスの問題が深刻になります.次に、優雅な解決方法を示します.2つのパラメータを受け入れるwathcStickyという方法を実装し、観察された要素とそのcontainer(必ずしも親ではない).この要素がsitcky状態にある場合、sticky-changeイベントが外部に送信されます.カスタムイベントはsticky-changeと呼ばれ、callbackでは現在傍受されている要素と現在の要素がsticky状態にあるかどうかを示すブール値が返されます.

document.addEventListener("sticky-change", function (e)
    {
      const { detail } = e;
      const { target, status } = detail;
      target.classList.toggle("shadow", status);
    });
watchSticky(dom, container);

wathcSticky実装原理:Intersection_Observer_APIを使用して、ターゲット要素が祖先要素またはviewportと交差する状況の変化を非同期で検出する方法を提供する.ターゲット要素の上とターゲット要素の親の一番下に高さ0のdivを2つ挿入し、topDivとbottomDivと名付け、Intersection_を使用します.Observer_APIはこの2つの要素とcontainerの交差状況を傍受する.topDivのtop値がcontainerDivのtopより小さく、2人が交差していない場合は、現在の要素がstickyにあることを証明します.bottomDivの判断は逆です.CODE