반응형
Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- react
- JavaScript
- 주식공부
- 덩크로우
- 오라클
- Github
- 파이썬
- 발매예정
- 제이쿼리
- 코로나19
- draw
- 나이키
- dunk high
- 덩크 로우
- stockx.com
- Linux
- Dunk Low
- 드로우
- 리액트
- 덩크 하이
- sacai
- 자바스크립트
- Nike
- Python
- dunklow
- 주식
- oracle
- GIT
- 리눅스
- jQuery
Archives
- Today
- Total
Life goes slowly...
[jQuery] jQuery(제이쿼리) 요소의 스크롤 위치 - .scrollLeft(), .scrollTop() 함수 본문
프로그래밍/Javascript
[jQuery] jQuery(제이쿼리) 요소의 스크롤 위치 - .scrollLeft(), .scrollTop() 함수
빨강소 2020. 11. 10. 14:04728x90
반응형
우리가 자주사용하고 있는 자바스크립트의 제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소의 스크롤 위치를 손쉽게 알 수 있고, 스크롤 위치를 설정할 수 있는 함수가 있습니다. 요소의 수직 이나 수평 스크롤 바의 위치를 알 수 있으며, 인수로 전달받은 값으로 수직, 수평의 스크롤 바의 위치를 설정할 수 있습니다. 위치 개념으로는 지역 좌표와 전역 좌표가 있는데 지역 좌표는 부모 노드 기준의 좌표이며, 전역 좌표는 최상위 노드인 Document의 Left와 Top 위치가 0부터 시작합니다.
jquery(제이쿼리)의 .scrollLeft() 함수
jQuery(제이쿼리)의 선택한 요소의 수평 스크롤 바의 위치를 얻거나, 선택한 요소의 수평 스크롤 바의 위치를 설정이 가능합니다.
//함수 사용방법
$(select).scrollLeft(); //스크롤바 수평 위치를 가져옴
$(select).scrollLeft(val); //스크롤바 수평 위치를 정함
//div 요소의 스크롤바 수평 위치를 가져옴
$( 'div' ).scrollLeft();
//div 요소의 스크롤바 수평 위치를 70px으로 정함
$( 'div' ).scrollLeft(70);
jquery(제이쿼리)의 .scrollTop() 함수
jQuery(제이쿼리)의 선택한 요소의 수직 스크롤 바의 위치를 얻거나, 선택한 요소의 수직 스크롤 바의 위치를 설정이 가능합니다.
//함수 사용방법
$(select).scrollTop(); //스크롤바 수직 위치를 가져옴
$(select).scrollTop(val); //스크롤바 수직 위치를 정함
//div 요소의 스크롤바 수직 위치를 가져옴
$( 'div' ).scrollTop();
//div 요소의 스크롤바 수직 위치를 150px으로 정함
$( 'div' ).scrollTop(150);
728x90
반응형
'프로그래밍 > Javascript' 카테고리의 다른 글
[Javascript] 객체를 병합하기 - Object.assign() 함수 (0) | 2020.12.12 |
---|---|
[Javascript] 비동기 처리 패턴 문법 - async & await (0) | 2020.12.11 |
[Javascript] 엘리먼트에 텍스트 추가하기 - textContent (0) | 2020.12.02 |
[jQuery] jQuery(제이쿼리) 요소의 넓이, 높이 - .with(), .height() 함수 (0) | 2020.11.11 |
[jQuery] jQuery(제이쿼리) 선택한 요소 감싸기 - .wrap() 함수 (0) | 2020.11.09 |
[jQuery] 제이쿼리의 선택한 요소 대체하기 - .replaceWith() 함수 (0) | 2020.11.06 |
[jQuery] jQuery(제이쿼리) 다음 요소 선택하기 - .next(), .nextAll() (0) | 2020.11.05 |
[jQuery] 제이쿼리(jQuery) 클래스 제거하기 - .removeClass() 함수 (0) | 2020.11.03 |
Comments