스크롤2 (step 28)

KHW·2021년 2월 22일

목록 보기

11/39

과제2 위 / 아래 버튼

해야할 것

숫자들 중앙에 일정크기로 배치

일정 스크롤이후의 위치에서 고정 버튼 보이게 만들기

왼쪽에 고정된 위치에 버튼 보이게 하기

클릭시 맨위로 보내기

1. 숫자들 중앙에 일정크기로 배치

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style>
    #set{
      margin :0 auto;
      width : 400px;
    }
  </style>
</head>
 
<body>
  <div id='set'></div>
</body>
<script>
  let num = 0
  let set = document.getElementById('set');
let setting = (num)=>`<span>${num}</span> `
for(let i=0;i<1000;i++){
set.insertAdjacentHTML('beforeend',setting(num++));
}
</script>

</html>

margin:0 auto로 중앙배치를 시키고 width를 설정하여 그 크기 안에서 숫자가 출력되게 만든다.

2. 일정 스크롤이후의 위치에서 고정 버튼 보이게 만들기

function checkScroll(){
if(window.innerHeight < window.pageYOffset)
{
  topBtn.style.display = 'block'
}
else{
  topBtn.style.display = 'none'
}
}

window.addEventListener('scroll',checkScroll)

스크롤 시 window.innerHeight와 window.pageYOffset를 비교하여 값을 정한다.

window.innerHeight : 브라우저 창에서 창틀을 뺀 크기

window.pageYOffset : y 축 방향으로 스크롤한 거리

즉, 브라우저 크기 이상으로 y축 방향 스크롤이 진행된다면(아래로 일정이상 진행한다면) 버튼이 보이게 만든다.

3. 왼쪽에 고정된 위치에 버튼 보이게 하기


    button{
      position:fixed;
      top:0;
      left :0;
      display :none;
    }

버튼에 대해 고정된 브라우저 위치값을 설정시킨다.

4. 클릭시 맨위로 보내기

 <button id='topBtn' onclick = "window.scrollTo(0,0)">위로 올라가는 버튼</button>

클릭시 window.scrollTo(0,0)을 진행한다.

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style>
    #set{
      margin :0 auto;
      width : 400px;
    }
    button{
      position:fixed;
      top:0;
      left :0;
      display :none;
    }
  </style>
</head>

<body>
  <div id='set'></div>
  <button id='topBtn' onclick = "window.scrollTo(0,0)">위로 올라가는 버튼</button>
</body>
  
<script>
  let num = 0
  let set = document.getElementById('set');
let setting = (num)=>`<span>${num}</span> `
for(let i=0;i<1000;i++){
set.insertAdjacentHTML('beforeend',setting(num++));
}
let topBtn = document.getElementById('topBtn')
function checkScroll(){
  if(window.innerHeight < window.pageYOffset)
  {
    topBtn.style.display = 'block'
  }
  else{
    topBtn.style.display = 'none'
  }
}
window.addEventListener('scroll',checkScroll)
</script>

</html>

정리

document.body.clientHeight : body가 포함하는 컨텐츠들 높이 크기 합계(브라우저 창크기 관련 X)
document.body.offsetHeight
document.documentElement.scrollTop : y 축 방향으로 스크롤한 거리

window.innerHeight : 브라우저의 창틀을 뺀 나머지 합 (브라우저와 관련, F12 개발자 도구의 화면크기에 따라서도 영향 받는다.)
window.outerHeight
window.pageXOffset
window.pageYOffset : 브라우저에서 y 축 방향으로 스크롤한 거리 (스크롤과 관련)
window.scrollY : 브라우저 맨 위를 기준으로 스크롤 한 크기