• Q&A
  • 회원가입
  • 로그인

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

3,141  
목차
  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로 설정해야 함.

 

2.

모든 브라우저 지원.

 

3.

Top 버튼 만들 때 유용.

 

 

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>

 

결과보기

 


찾아주셔서 감사합니다. Since 2012