이 글에서는 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('fixed'); }else{ orderPriceNode.classList.add('fixed'); } }) }
이렇게 하면 바닥과의 거리가 120일 때 바닥이 빨려 들어가게 됩니다.
관련 추천 :
DOM을 기준으로 비움과 제거의 차이에 대한 자세한 설명 예시
위 내용은 React는 실제 DOM을 작동하여 바닥을 동적으로 빨아들입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!