728x90
300x250
element.scrollIntoView()
특정 element를 기준으로 스크롤을 이동시키는 메소드이다.
기본 문법
element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter
예시
id ="content"인 요소를 브라우저 창의 보이는 영역으로 스크롤한다.
const element = document.getElementById("content");
element.scrollIntoView();
즉 element.scrollIntoView()는 스크롤 해서 엘리먼트 영역을 보여주는 기능을한다.
<!DOCTYPE html>
<html>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: coral;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
<body>
<h1>The Element Object</h1>
<h2>The scrollIntoView() Method</h2>
<button onclick="myFunction()">Scroll</button>
<p>Click "Scroll" to scroll to the top of the element with id="content".</p>
<div id="myDIV">
<div id="content">
<p>Some text inside an element.</p>
<p>Some text inside an element.</p>
<p>Some text inside an element.</p>
</div>
</div>
<script>
function myFunction() {
const element = document.getElementById("content");
element.scrollIntoView();
}
</script>
</body>
</html>
출처 :
https://www.w3schools.com/jsref/met_element_scrollintoview.asp
https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView
728x90
반응형
'javaScript > J Query & 스크립트' 카테고리의 다른 글
| [javaScript]배열 첫번재 요소 제거 - shift() (0) | 2022.10.27 |
|---|---|
| [javaScript]startsWith() 시작문자열 확인하기 (0) | 2022.09.26 |
| [gsap] - scale 사이즈 키우기 (0) | 2022.08.04 |
| [javaScript] 익명함수 (0) | 2022.07.30 |
| js반복문 (0) | 2022.07.23 |
댓글