[HTML_CSS] JQ - scrollLeft() 메서드 - 선택요소 가로 스크롤바 위치 설정/반환 (= scrollLeft메서드 = 스크롤레프트 메서드)

1. scrollLeft() 예제 - 가로 스크롤바 위치 반환
2. scrollLeft() 정의
3. scrollLeft() 구문
4. scrollLeft() 예제 - 가로 스크롤바 위치 설정

scrollLeft() 예제 - 가로 스크롤바 위치 반환

 

<style>

div {border:1px solid black;width:100px;height:130px;overflow:auto;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("div").scrollLeft() + " px");

  });

});

</script>

<div>가장 긴 영어단어: pneumonoultramicroscopicsilicovolcanoconiosis (주로 광산에서 규진(珪塵)을 흡입하여 생긴 폐 질환)</div><br>

<button>클릭</button>

 

결과보기

scrollLeft() 정의

 

선택 요소의 가로 스크롤바 위치를 px 단위로 설정/반환. 

 

---

 

1.

맨 왼쪽 위치: 0

 

2.

• 반환 경우, 첫 번재 일치 요소의 스크롤바 수평 위치 반환.
• 설정 경우, 모든 일치 요소의 스크롤바 수평 위치 설정.

scrollLeft() 구문

 

스크롤바 가로 위치 반환

$(selector).scrollLeft()

 

스크롤바 가로 위치 설정

$(selector).scrollLeft(position)

 

---

[매개변수]

 

position

가로 스크롤바 위치 지징. (px 단위)

 

scrollLeft() 예제 - 가로 스크롤바 위치 설정

 

<style>

div {border:1px solid black;width:100px;height:130px;overflow:auto;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("div").scrollLeft(100);

  });

});

</script>

<div>가장 긴 영어단어: pneumonoultramicroscopicsilicovolcanoconiosis (주로 광산에서 규진(珪塵)을 흡입하여 생긴 폐 질환)</div><br>

<button>클릭</button>

 

결과보기