-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
IntersectionObserver
22.11.19 00:29 작성 조회수 153
0
안녕하세요 선생님~ 강의 7강처럼 고정된 컨텐츠로 포트폴리오를 만들려고 하고있습니다.
다만 IntersectionObserver 내장함수를 이용하여 백분율을 좀 더 쉽게 구하는 방법이 있을까요? 몇일째 공부중인데, 잘 모르겠어서 질문드립니다 ㅜ
답변을 작성해보세요.
1
깡코딩
지식공유자2022.11.19
안녕하세요 :)
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를 참고해 보시고 브라우저별 버그가 있을 수 있으니 충분한 테스트를 진행하길 추천드립니다 :)
그럼 또 다른 궁금증이 생기면 문의주세요
답변 1