React は実際の DOM を操作して動的にボトムを吸い出します

この記事では、React で実際の DOM を操作して動的ボトム吸い出しを実現する例を主に紹介していますが、編集者が非常に良いと思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

動的下部吸引：最初は固定部分がページに固定されており、ページが下部から一定の距離までスクロールすると、固定部分が固定されます。

これにはページのスクロール距離を計算する必要があります。Jqueryまたはネイティブjsを使用すると非常に簡単に実装できます。ただし、reactの使用はDOMの操作を推奨していないため、仮想DOMを使用するとこの効果を実現できません。操作のために DOM を直接取得するために js を導入する必要があります。

react は、componentDidMount の後にページのレンダリングを完了するため、js ネイティブ メソッドを直接使用して DOM 要素を取得し、操作を実行できます。

componentDidMount() {
 this.changeFixed()
}
//計算高度
changeFixed(){
 //getDOMNode
 const layoutNode = document.querySelectorAll('.page-layout')[0];
 const orderPriceNode = document.querySelectorAll('.test-price')[0];
 window.addEventListener('scroll', function (e) {
  const windowInnerHeight = window.innerHeight;
  const layoutNodeHeight = layoutNode.offsetHeight;
  //滚动超出视野距离
  let scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
  const distanceBottom = layoutNodeHeight - scrollTop - windowInnerHeight;
  //120的时候吸底
  if(distanceBottom <= 120){
   orderPriceNode.classList.remove(&#39;fixed&#39;);
  }else{
   orderPriceNode.classList.add(&#39;fixed&#39;);
  }
 })
}

このように、底からの距離が120のときに底が吸い込まれます

関連推奨事項:

DOMに基づいたemptyとremoveの違いの詳細な説明

Example JQueryセレクター、DOMノードの共有 操作演習

js DOMイベントの高度な補足

以上がReact は実際の DOM を操作して動的にボトムを吸い出しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。