IntersectionObserver

안녕하세요 :)

IntersectionObserver는 수업에 포함된 내용이 아니라 간단하게 설명드리겠습니다 :)

IntersectionObserver로 백분율을 구하기 위해선

1.옵션 threshold에 한계점을 지정해 객체를 생성하고 콜백 함수를 등록합니다

2.observe 메소드에 백분율 엘리먼트를 지정하고

3.콜백 함수를 통해 백분율을 받아 구할 수 있습니다

아래 간단한 예제를 참고하면 될 것 같습니다

<body>
	<style>
	* {
		padding: 0;
		margin: 0;
	}
	.box {
		position: relative;
		display: flex;
		width: 200px;
		height: 200px;
		padding: 10px;
		margin: 0 auto;
		background-color: mediumpurple;
		margin-bottom: 10px;
		justify-content: center;
		color: #fff;
	}
	</style>
	<div style="height: 110vh"></div>
	<div id="box1" class="box"></div>
	<div style="height: 110vh"></div>
	<script>
		var observer = new IntersectionObserver(callBack, { //1
			threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
		});
		observer.observe(document.querySelector('#box1')); //2

		function callBack(entries) { //3
			entries.forEach(function(entry) {
				var percent = (entry.intersectionRatio * 100) + "%";
				entry.target.innerText = percent;
				console.log(percent);
			});
		}
	</script>
</body>

더 자세한 내용은 api를 참고해 보시고 브라우저별 버그가 있을 수 있으니 충분한 테스트를 진행하길 추천드립니다 :)

그럼 또 다른 궁금증이 생기면 문의주세요

Cộng đồng Hỏi & Đáp của Inflearn