Web/javascript
[자바스크립트] scrollIntoView()
아랄라랄라
2024. 6. 25. 15:40
'scrollIntoview()' 메서드는 웹페이지에서 특정 요소가 화면에 보이도록 자동으로 스크롤하는 메서드이다.
예를 들어, 버튼을 클릭했을 때 페이지의 특정 부분으로 스크롤하고 싶을 때 사용한다.
예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollIntoView Example</title>
<style>
body {
height: 2000px; /* 긴 페이지를 만듭니다 */
}
#targetElement {
margin-top: 1500px; /* 스크롤하기 위해 페이지 아래쪽에 위치시킵니다 */
background-color: yellow;
padding: 20px;
}
</style>
</head>
<body>
<button onclick="scrollToElement()">Scroll to Element</button> <!-- 버튼 생성 -->
<div id="targetElement">Hello, I'm the target element!</div> <!-- 타겟 요소 생성 -->
<script>
function scrollToElement() {
// 요소를 화면에 맞게 스크롤하는 함수
document.getElementById('targetElement').scrollIntoView({
behavior: 'smooth', // 부드럽게 스크롤
block: 'center' // 화면 중앙에 위치하도록
});
}
</script>
</body>
</html>
#코드 설명
- HTML
- 'button' : 클릭하면 스크롤을 실행하는 버튼
- 'div#targetElement' : 스크롤해서 화면에 보이게 하고 싶은 요소
- CSS
- 'body'의 'height'를 2000px로 설정하여 페이지를 길게 만든다.
- '#targetElement'의 'margin-top'을 1500px로 설정하여 페이지 아래쪽에 위치시킨다
- JavaScript
- 'scrollToElement' 함수는 'button'이 클릭되었을 때 실행된다.
- 'document.getElementById('targetElement').scrollIntoView()'를 사용하여 '#targetElement' 요소를 화면에 맞게 스크롤한다.
- 'behavior : smooth' 옵션으로 부드럽게 스크롤되도록 설정한다.
- 'block : center' 옵션으로 요소가 화면에 중앙에 오도록 설정한다.
'scrollIntoView()' 메서드의 옵션
이 메서드는 두 가지 형태의 옵션을 받을 수 있다.
- Boolean 형태
- 'scrollIntoViewOptions' 객체 형태
1. Boolean 형태
'scrollIntoView()' 메서드는 단순히 'true' 또는 'false' 값을 옵션으로 받을 수 있다.
- true: 요소를 뷰포트의 상단에 맞춘다.
- false: 요소를 뷰포트의 하단에 맞춘다.
element.scrollIntoView(true); // 요소를 뷰포트의 상단에 맞춤
element.scrollIntoView(false); // 요소를 뷰포트의 하단에 맞춤
2. 'scrollIntoViewOptions' 객체 형태
좀 더 세밀한 조정을 위해 객체를 전달할 수 있다.
- 'behavior' : 스크롤 애니메이션을 정의한다.
- 'auto': 기본 스크롤 동작을 사용한다(즉시 이동).
- 'smooth' : 부드러운 애니메이션으로 스크롤한다.
- 'block' : 수직 정렬을 정의한다.
- 'start' : 요소의 상단을 뷰포트의 상단에 맞춘다. (기본값)
- 'center' : 요소를 뷰포트의 중앙에 맞춘다.
- 'end' : 요소의 하단을 뷰포트의 하단에 맞춘다.
- 'nearest' : 요소의 상단 또는 하단 중 뷰포트에 가장 가까운 부분에 맞춘다.
- 'inline' : 수평 정렬을 정의한다.
- 'start' : 요소의 왼쪽을 뷰포트의 왼쪽에 맞춘다.
- 'center' : 요소를 뷰포트의 중앙에 맞춘다.
- 'end' : 요소의 오른쪽을 뷰포트의 오른쪽에 맞춘다.
- 'nearest' : 요소의 왼쪽 또는 오른쪽 중 뷰포트에 가장 가까운 부분에 맞춘다.
element.scrollIntoView({
behavior: 'smooth', // 부드럽게 스크롤
block: 'center', // 요소를 화면의 중앙에 위치
inline: 'start' // 요소의 왼쪽을 뷰포트의 왼쪽에 맞춤
});
예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollIntoView Options Example</title>
<style>
body {
height: 2000px; /* 긴 페이지를 만듭니다 */
}
.target {
margin-top: 1500px; /* 스크롤하기 위해 페이지 아래쪽에 위치시킵니다 */
background-color: yellow;
padding: 20px;
}
</style>
</head>
<body>
<button onclick="scrollToElement('start')">Scroll to Start</button>
<button onclick="scrollToElement('center')">Scroll to Center</button>
<button onclick="scrollToElement('end')">Scroll to End</button>
<button onclick="scrollToElement('nearest')">Scroll to Nearest</button>
<div class="target" id="targetElement">Hello, I'm the target element!</div>
<script>
function scrollToElement(position) {
document.getElementById('targetElement').scrollIntoView({
behavior: 'smooth', // 부드럽게 스크롤
block: position, // 전달받은 위치로 스크롤
inline: 'nearest' // 수평 위치는 화면에 가장 가까운 위치로 스크롤
});
}
</script>
</body>
</html>
요약)
- boolean : 'true'는 상단에 맞추고, 'false'는 하단에 맞춘다.
- ScrollIntoViewOptions 객체 : 'behavior', 'block', 'inline' 속성을 통해 세밀한 스크롤 동작을 설정할 수 있다.
- behavior : 'auto'와 'smooth'
- block : 'start', 'center', 'end', 'nearest'
- inline : 'start', 'center', 'end', 'nearest'
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Element: scrollIntoView() method - Web APIs | MDN
The Element interface's scrollIntoView() method scrolls the element's ancestor containers such that the element on which scrollIntoView() is called is visible to the user.
developer.mozilla.org
+ GPT
728x90