React- onScroll

Navigation Bar에 보편적으로 들어가는 onMouseEnter의 경우 onMouseLeave가 있기에 그 반대값을 주기가 쉽지만 onScroll의 경우, react life cycle method를 사용해서 스크롤바의 위치를 잡아서 기능을 생성해줘야 한다.

1. onScroll을 이벤트를 주고 싶은 태그에 준다.

onScroll={this.handleScroll(주고 싶은 기능을 영어로 간단히 표현)}

아래는 그 기능을 생성해주는 단계

    componentDidMount = () => {
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount = () => {
        window.removeEventListener('scroll', this.handleScroll);
    }

componentDidMount는 eventlistener을 생성하고
componentWillUnmount는 eventlistener를 제거하는 기능을 한다.

그리고 function의 기능을 정의

handleScroll = (e) => {
const scrollTop = ('scroll', e.srcElement.scrollingElement.scrollTop);
this.setState({
	scrollTop
})
}

기능을 정의한 후

기본값을 state로 scrollTop이라는 객체를 정의하면 setState로 들어오는 스크롤의 위치가 디텍트되게 된다.

constructor() {
	super();
    this.state = {
    scrollTop: 0
    }
}

완성된 모습

class Scroll extends React.Component {
	constructor() {
    	super();
        this.state = {
        	scrollTop: 0
        }
    }
    
    componentDidMount = () => {
    	window.addEventListener('scroll', this.handleScroll);
    }
    
    componentWillUnMount = () => {
    	window.removeEventListener('scroll', this.handleScroll);
    }
    
    handleScroll = (e) => {
    	const scrollTop = ('scroll', e.srcElement.scrollingElement.scrollTop);
        this.setState({
        	scrollTop
        })
    }
    
    render() {
    	return(
        	<div className="Scroll" onScroll={this.handleScroll}>
            </div>
        )
    }
}