IntersectionObserver
255
4 asked
안녕하세요 선생님~ 강의 7강처럼 고정된 컨텐츠로 포트폴리오를 만들려고 하고있습니다.
다만 IntersectionObserver 내장함수를 이용하여 백분율을 좀 더 쉽게 구하는 방법이 있을까요? 몇일째 공부중인데, 잘 모르겠어서 질문드립니다 ㅜ
Answer 1
1
안녕하세요 :)
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를 참고해 보시고 브라우저별 버그가 있을 수 있으니 충분한 테스트를 진행하길 추천드립니다 :)
그럼 또 다른 궁금증이 생기면 문의주세요
다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
0
197
1
반응형에 대해 질문이 있습니다 !
0
367
1
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
0
379
1
함수가 정의되기 전에 함수 호출
0
344
1
섹션12 보너스 챕터에 관한 질문입니다!
0
468
1
5-3-1 강좌 섹션 질문 합니다.
0
312
1
죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.
1
463
3
화면 높이 관련 질문 있습니다.
1
433
1
선생님
0
370
1
5-2 vanilla.html 질문합니다.
0
422
1
5-3-2 질문입니다.
1
293
1
5-2 추가 질문이요
0
346
2
5-2 ! 질문이요.
0
266
1
안녕하세요!
0
273
1
질문드립니다.
1
366
2
질문드립니다.
0
1665
3
색션6강 카운트관련 문의드립니다!
0
239
1
섹션5 관련 질문드립니다.
0
261
1
setProperty 를 재활용 하고싶습니다.
0
210
1
offsetheight와 scrollheight
0
398
1
완성된코드를 그대로 가져왔는데 크기가 이상해요
0
428
2
2:56에 10씩 증가시키는건 어떻게 하신건가요?
0
316
1
<script>에 $(function(){})으로 감싸준 이유
0
207
1
5섹션예제 전부 깨져요 ㅠ
0
243
1