사용자의 마우스 커서를 따라다니는 요소 만들기를 이은 JS 좌표공부 2탄이다.
핵심 기능은 타이틀에 적혀있는 scrollIntoView와 scrollBy 함수이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>move-to-page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="btns">
<button id='move_to_next'>Next Section</button>
<button id='move_to_one'>Move to One</button>
<button id='move_to_ten'>Move to Ten</button>
</div>
<section id="page_one" class='pages'>1Page</section>
<section id="page_two" class='pages'>2Page</section>
<section id="page_three" class='pages'>3Page</section>
<section id="page_four" class='pages'>4Page</section>
<section id="page_five" class='pages'>5Page</section>
<section id="page_six" class='pages'>6Page</section>
<section id="page_seven" class='pages'>7Page</section>
<section id="page_eight" class='pages'>8Page</section>
<section id="page_nine" class='pages'>9Page</section>
<section id="page_ten" class='pages'>10Page</section>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
</body>
</html>HTML 코드
상단 버튼 3개와 10개의 섹션박스를 만들었다.
지금 생각하니 첫 번째와 열 번째 섹션에만 id 값을 주는 게 맞는 것 같다.
body {
height: 100%;
width: 100%;
background-color: #000;
display: flex;
flex-direction: column;
align-items: center;
}
button {
border-radius: 8px;
padding : 1rem 2rem;
font-size : 1.25rem;
cursor: pointer;
}
#btns {
position: fixed;
top: 2rem;
right: 2rem;
}
.pages {
width : 100%;
height : 480px;
color : #eee;
font-size : 48px;
font-weight: 700;
}
#page_one {
background-color: red;
}
#page_two {
background-color: blue;
}
#page_three {
background-color: green;
}
#page_four {
background-color: tomato;
}
#page_five {
background-color: lightskyblue;
}
#page_six {
background-color: teal;
}
#page_seven {
background-color: olive;
}
#page_eight {
background-color: orange;
}
#page_nine {
background-color: aquamarine;
}
#page_ten {
background-color: blueviolet;
}CSS 코드
position : fixed를 이용해 버튼 박스 상단고정.
body 태그에 display : flex 적용. 요소들을 잘 정렬할 수 있도록 했다.
const moveToNext = document.querySelector('#move_to_next');
const moveToOne = document.querySelector('#move_to_one');
const moveToTen = document.querySelector('#move_to_ten');
const pageOne = document.querySelector('#page_one');
const pageTen = document.querySelector('#page_ten');
moveToNext.addEventListener('click', () => {
window.scrollBy({
top: 480,
left: 0,
behavior: "smooth",
});
});
moveToOne.addEventListener('click', () => {
pageOne.scrollIntoView({behavior:'smooth', block:'center'});
});
moveToTen.addEventListener('click', () => {
pageTen.scrollIntoView({behavior:'smooth', block:'center'});
});JS 코드
- 각 버튼과 1페이지, 10페이지를 변수로 지정해준다.
- moveToNext 버튼이 클릭되면 ,
- scrollBy 함수를 이용해 각 섹션의 높이값인 480px 씩 이동할 수 있도록 했다.
- moveToOne, moveToTen 버튼이 클릭되면,
- scrollIntoView 함수를 이용해 각각 페이지로 이동할 수 있도록 했다.
* scrollIntoView 함수는 ( ) 안에 빈값을 주어도 되지만, option 객체로 다양한 기능을 지원하기에 사용해 보는 것도 나쁘지 않은 것 같다.
사용할 수 있는 옵션값은 다음과 같다.
- behavior ( 이동 제어 ) : 'smooth' (부드럽게) , 'instant' (바로이동) , 'auto' (자동) ... 기본값 : instant
- block ( 요소 어디에 위치시킬 건지 : 수직 ) : 'start' (요소 상단), 'center' (요소 중간) , 'end' (요소 하단), 'nearest' (가장 가까운 요소)... 기본값 : start
- inline ( 요소 어디에 위치시킬 건지 : 수평 ) : 'start' (요소 상단), 'center' (요소 중간) , 'end' (요소 하단), 'nearest' (가장 가까운 요소)... 기본값 : nearest
'코딩 리뷰 > [HTML, CSS , JS]' 카테고리의 다른 글
| [HTML,CSS] 이미지 스크롤 애니메이션 (2) | 2023.10.24 |
|---|---|
| [HTML, CSS, JS] Animation 효과로 눈내리는 배경화면 만들기 (4) | 2023.05.19 |
| [HTML, CSS, JS] 요소를 마우스 커서에 따라다니게 하기 (0) | 2023.05.18 |
| [HTML, CSS, JS] 유튜브 클론코딩 리뷰 (0) | 2023.04.26 |
| [HTML, JS] 멀티 Select 공부 리뷰 (0) | 2023.04.14 |