요소 사이즈와 스크롤 연습과제 해답

연습과제 1

const page = document.querySelector('.document')
const agreeBtn = document.querySelector('button')

function checkTheBottomOfScrolling(){
  // 구현하기 
  if(page.scrollHeight - page.clientHeight === page.scrollTop){
    console.log('문서 다 읽음')
    agreeBtn.disabled = false 
  }
}

page.addEventListener('scroll', checkTheBottomOfScrolling)

 

연습과제 2

this 는 스크롤 이벤트가 발생한 page 요소를 가리킨다. 

const pages = document.querySelectorAll('.document')
const agreeBtn = document.querySelector('button')
let count = 0

function isEndOfScroll(elem){
  return elem.scrollHeight - elem.clientHeight === elem.scrollTop
}

function checkTheBottomOfScrolling(){
  // 구현하기 
  if(isEndOfScroll(this)){
    console.log('문서 다 읽음')
    count++
  }
 
  if(count === pages.length){
    agreeBtn.disabled = false
  }
}

for(let page of pages){
  page.addEventListener('scroll', checkTheBottomOfScrolling)
}

아래와 같이 이벤트 타겟을 활용한 방법도 있다.

const pages = document.querySelectorAll('.document')
const agreeBtn = document.querySelector('button')
let count = 0

function isEndOfScroll(elem){
  return elem.scrollHeight - elem.clientHeight === elem.scrollTop
}

function checkTheBottomOfScrolling(e){
  // 구현하기 
  console.log(e.target)
  
  if(isEndOfScroll(e.target)){
    console.log('문서 다 읽음')
    count++
  }
 
  if(count === pages.length){
    agreeBtn.disabled = false
  }
}

for(let page of pages){
  page.addEventListener('scroll', checkTheBottomOfScrolling)
}

 

연습과제 3

const page = document.querySelector('.document')
const agreeBtn = document.querySelector('button')

function checkTheBottomOfScrolling(){
  // 구현하기 
  if(page.scrollHeight - page.clientHeight === page.scrollTop){
    console.log('문서 다 읽음')
    agreeBtn.disabled = false 
  }
}
function scrollToBottom(e){
  console.log(e.keyCode)
  if(e.keyCode === 40){
    page.scrollTop += 10
  }else if(e.keyCode === 38){
    page.scrollTop -= 10
  }
}

page.addEventListener('scroll', checkTheBottomOfScrolling)
document.addEventListener('keyup', scrollToBottom)