[Window_Object] JS - scrollBy() 메서드 ★ - 스크롤 이동 (※ 지정 픽셀 길이 만큼 이동 = scrollBy메서드 = 스크롤바이메서드)

1. scrollBy() 예제 - 스크롤 이동
2. scrollBy() 정의
3. scrollBy() 구문
4. scrollBy() 예제 - 스크롤 이동 (down/up/right/left)

scrollBy() 예제 - 스크롤 이동 

 

<style>

body {width:750px ;}

button {position: fixed;}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>홈페이지 제작관리 + 서버관리 + HTML CSS JS JQ PHP SQL BS</p>

<button onclick="scrollWin()">클릭</button><br><br>

<script>

function scrollWin() {

  window.scrollBy(100, 0);

}

</script>

 

결과보기

※ scrollWin 버튼 클릭할 때마다 해당 길이만큼 계속 이동.

scrollBy() 정의

 

지정된 픽셀 수만큼 문서를 스크롤 이동.

 

---

 

1.

• 윈도우창 스크롤바 visible 속성을 true로 설정해야 함.
• Top 버튼 만들 때 유용. 

 

2.

모든 브라우저 지원.

 

3. MDN window.scrollBy() 예제보기
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy

 

scrollBy() 구문

 

window.scrollBy(xnum, ynum)

 

---

[매개변수] 

 

xnum

필수. 가로 이동 픽셀수

• 양수 : 오른쪽으로 이동
• 음수 : 왼쪽으로 이동 

 

ynum

필수. 세로 이동 픽셀수

• 양수 : 아래로 이동
• 음수 : 위로 이동

 

---

[반환값]

 

없음. (단지, 해당 위치로 이동할 뿐임.)

 

scrollBy() 예제 - 스크롤 이동 (down/up/right/left)

 

<style>

body {height: 5000px; width:750px ;}

.btn {position: fixed;}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>홈페이지 제작관리 + 서버관리 + HTML CSS JS JQ PHP SQL BS</p>

<div class='btn'>

    <button onclick="scrollWin(0, 50)">Scroll down</button>

    <button onclick="scrollWin(0, -50)">Scroll up</button>

    <button onclick="scrollWin(100, 0)">Scroll right</button>

    <button onclick="scrollWin(-100, 0)">Scroll left</button>

</div>                                                

<script>

function scrollWin(x, y) {

  window.scrollBy(x, y);

}

</script>

 

결과보기