728x90
오늘은 scrollIntoView를 사용해서 화면 하단으로 이동해보겠습니다!
scrollIntoView(false) 를 사용하면 스크롤이 하단으로, scrollIntoView(true) 를 사용하면 스크롤이 상단으로 이동합니다.
* 결과
* 전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
}
.input{
position: fixed;
top: 16px;
left: 16px;
}
p{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="input">
<input type="text">
<button onclick="enter()">입력</button>
</div>
<div id="text_box">
<p>안녕하세요~</p>
</div>
<script>
function enter(){
// 입력값 가지고 오기
// text_box에 입력값을 출력하기
// 스크롤 하단으로 이동
let input = document.querySelector('input');
let child = document.createElement("p");
child.textContent = input.value;
let parent = document.getElementById('text_box');
parent.appendChild(child);
document.body.scrollIntoView(false);
}
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [JavaScript] 자식 창에서 부모 창으로 데이터 전송하기 (0) | 2022.10.22 |
|---|---|
| [JavaScript] Web Notification 구현하기 (0) | 2022.10.06 |
| [JavaScript] addEventListener 한 번만 동작하게 만들기 (0) | 2022.09.21 |
| [JavaScript] 문자열 모든 공백 제거하기 (0) | 2022.09.02 |
| [ JavaScript ] 테이블 동적 행 추가/삭제하기 (0) | 2022.08.31 |
