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을 기준으로 비움과 제거의 차이에 대한 자세한 설명 예시

예 JQuery 선택기 공유, DOM 노드 운영 연습

js DOM 이벤트에 대한 고급 보충자료

위 내용은 React는 실제 DOM을 작동하여 바닥을 동적으로 빨아들입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!