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

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

262  
목차
  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>

 

결과보기



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