스크롤2 (step 28)
과제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 : 브라우저 맨 위를 기준으로 스크롤 한 크기
DOM.getBoundingClientRect() : 객체 형태로 출력
{
bottom: 178
height: 44
left: 212.5
right: 1092.5
top: 134
width: 880
x: 212.5
y: 134
}
document.documentElement.scrollTop === window.scrollY
출처
Author And Source
이 문제에 관하여(스크롤2 (step 28)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khw970421/스크롤2-step-28저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)