-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
안되네요 ㅠㅠ
19.08.15 20:51 작성 조회수 77
0
.ilbuni.zoom {
transform: scale(2);
border: 2px solid red;
}
<script type="text/javascript">
(function() {
const outputElem = document.querySelector('.output');
const ilbuniElem = document.querySelector('.ilbuni');
let num=0;
function showValue() {
let posY = ilbuniElem.getBoundingClientRect().top;
outputElem.innerHTML = posY;
// console.log(window.innerHeight);
if (posY<window.innerHeight * 0.2) {
ilbuniElem.classList.add('zoom');
} else{
ilbuniElem.classList.remove('zoom');
}
}
window.addEventListener('scroll', function () {
showValue();
});
showValue();
})();
</script>
똑같이 작성했는데 이미지 크기가 변하지 않아요
확인해보려고 줌 클래스에 보더값을 추가했는데 보더값은 반응해서 나오더라구요.
혹시 삽입된 그림이 크거나 뭔가 호환상에 따라서 안될수도 있는건가요??
그리고
let num=0; 이값은 영상에서는 설명이 없던데 갑자기 왜 넣으신걸까요?
그리고 이벤트리스너 부분을 아래처럼 변경 해도 똑같이 값이 나오는데 이대로 써도 문제없는건가요?
window.addEventListener('scroll', showValue);
설명 부탁드립니다 선생님~
답변을 작성해보세요.
1
1분코딩
지식공유자2019.08.19
transform 자체를 지원하지 않는 브라우저라면 작동을 안할 수도 있긴한데,
크롬을 사용하고 계신 거라면 소스를 똑같이 작성했을 경우 되는게 정상입니다.
let num = 0;은 필요 없는게 맞습니다~
제가 뭔가 테스트 하고 실수로 남겨둔 것 같아요^^;
그리고
window.addEventListener('scroll', showValue);
의 형태로 써도 무방합니다 ^^
답변 1