window.scroll(x-coord,y-coord)
문서 내 특정 위치로 스크롤하는 기능이다.
- x-coord: 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 가로축,
x축을 기준으로 지정된 픽셀로 스크롤한다. - y-coord: 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 세로축,
y축을 기준으로 지정된 픽셀로 스크롤한다. - option
- top: x축을 기준으로 지정된 픽셀로 스크롤한다.
- left: y축을 기준으로 지정된 픽셀로 스크롤한다.
- behavior: auto , smooth
window.scrollTo(x-coord,y-coord)
문서 내 특정 위치로 스크롤하는 기능으로 scroll과 효과가 같다.
- x-coord: 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 가로축,
x축을 기준으로 지정된 픽셀로 스크롤한다. - y-coord: 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 세로축,
y축을 기준으로 지정된 픽셀로 스크롤한다. - option
- top: x축을 기준으로 지정된 픽셀로 스크롤한다.
- left: y축을 기준으로 지정된 픽셀로 스크롤한다.
- behavior: auto , smooth ,instant(스크롤 즉시 적용)
window.scrollBy(x-coord,y-coord)
문서를 지정된 px만큼 스크롤한다.
- x-coord는 스크롤할 수평 픽셀 값
- y-coord는 스크롤할 수직 픽셀 값
- option
- top: x축을 기준으로 지정된 픽셀로 스크롤한다.
- left: y축을 기준으로 지정된 픽셀로 스크롤한다.
- behavior: auto , smooth ,instant(스크롤 즉시 적용)
element.scrollIntoView
scrollIntoView가 호출된 요소로 스크롤시켜주는 기능이다.
매개변수
alignTop(option)
불리언 값으로 true면 요소의 상단이 스크롤이 가능한 조상 요소의 보이는 영역 상단에 정렬된다.
- scrollIntoViewOptions: {block: "start", inline: "nearest"}와 일치하다.
불리언 값으로 false면 요소의 하단이 스크롤 가능한 조상 요소의 보이는 영역 하단에 정렬된다.
- scrollIntoViewOptions: {block: "end", inline: "nearest"}와 일치하다.
scrollIntoViewOptions
다음의 속성들을 포함하는 객체
- behavior: smooth, instant, auto
- block: 수직정렬 (start,center,end, nearest)
- inline: 수평정렬 (start,center,end, nearest)
예시
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.gold{
position: absolute;
top: 1000px;
}
.btns{
position: fixed;
}
</style>
</head>
<body>
<div class="btns">
<button class="btn">Find a gold</button>
<button class="btn2">move to Down</button>
<button class="btn3">move by 200px</button>
</div>
<img class="gold" src="gold.png" alt="골드">
<script>
const btn = document.querySelector('.btn');
const btn2 = document.querySelector('.btn2');
const btn3 = document.querySelector('.btn3');
const gold= document.querySelector('.gold');
btn.addEventListener('click',()=>{
gold.scrollIntoView({behavior:'smooth'});
})
btn2.addEventListener('click',()=>
window.scrollTo({behavior:"smooth",top:window.innerHeight}));
btn3.addEventListener('click',()=> window.scrollBy({behavior:"smooth",top:200}));
</script>
</body>
학습 기록.