React 프로젝트 개발에는 페이지가 탭 위치로 스크롤될 때 탭이 상단에 고정되어야 한다는 요구 사항이 있습니다.
구현 아이디어는 실제로 매우 간단합니다. 즉, 스크롤 거리(scrollTop)가 탭과 페이지 offsetTop 상단 사이의 거리보다 큰 경우를 결정하고 탭 위치를 고정으로 변경하는 것입니다.
반응에서는 상태에 navTop 속성을 설정하고 이 속성의 값을 true 또는 false로 전환한 다음 탭 태그의 classnames() 메서드를 사용하여 navTop의 값을 사용하여 고정된 클래스 이름을 추가합니다.
처음에는 이렇게 썼습니다.
import cs from 'classnames'; class FixedTab extends React.Component{ constructor(props){ super(props); this.state = { navTop: false } this.$tab = null; this.offsetTop = 0; } componentDidMount(){ this.$tab = this.refs.tab; if(this.$tab){ this.offsetTop = this.$tab.offsetTop; window.addEventListener('scroll',this.handleScroll); } } handleScroll(){ let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(sTop >= this.offsetTop){ this.setState({ navTop: true }) } if(sTop < this.offsetTop){ this.setState({ navTop:false }) } } render(){ return( <p ref="tab" className={cs({'fixed':this.state.navTop})}></p> ) } }
그러다가 이렇게 쓰는데 문제를 발견했습니다. 스크롤바의 스크롤 거리가 해당 조건에 도달했을 때 탭이 천장 효과를 보였지만 순식간에 회복되었습니다. . 스크롤 막대도 다시 튀어 나와 더 이상 아래로 스크롤할 수 없습니다.
처음에는 판단 논리에 문제가 있는 줄 알았으나 도저히 해결책을 찾을 수 없었습니다. 나중에는 상태 값 변경 사이의 시간 차이로 인해 발생한 것이라고 의심했습니다. 그런 다음 스크롤 거리를 판단하기 전에 값을 추가했습니다. navTop의 상태를 확인합니다.
주로 수정된 코드는 다음과 같습니다.
handleScroll(){ let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(!this.state.navTop && sTop >= this.offsetTop){ this.setState({ navTop: true }) } if(sTop < this.offsetTop){ this.setState({ navTop:false }) } }
이 수정 후에는 천장 효과가 정상적으로 작동됩니다.
위 내용은 React.js를 사용하여 탭 한도 구현 시 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!