HTML DOM scrollLeft 속성
예시
<div> 요소의 콘텐츠가 가로 및 세로로 스크롤되는 픽셀 수를 가져옵니다.
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
scrollLeft 속성은 요소 콘텐츠가 가로로 스크롤되는 픽셀 수를 설정하거나 반환합니다.
팁: scrollTop 속성을 사용 하여 요소 콘텐츠가 세로로 스크롤되는 픽셀 수를 설정하거나 반환합니다.
팁: 요소에 스크롤바를 추가하려면 CSS overflow 속성을 사용하십시오.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
scrollLeft | Yes | Yes | Yes | Yes | Yes |
통사론
scrollLeft 속성을 반환합니다.
element.scrollLeft
scrollLeft 속성을 설정합니다.
element.scrollLeft = pixels
속성 값
Value | Description |
---|---|
pixels |
Specifies the number of pixels the element's content is scrolled horizontally. Special notes:
|
기술적 세부 사항
반환 값: | 요소의 콘텐츠가 가로로 스크롤된 픽셀 수를 나타내는 숫자 |
---|
더 많은 예
예시
< div > 요소의 내용을 가로로 50픽셀, 세로로 10픽셀로 스크롤합니다.
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
예시
< div > 요소의 내용을 가로로 50픽셀, 세로로 10픽셀 스크롤합니다.
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
예시
<body> 내용을 가로로 30픽셀, 세로로 10픽셀 스크롤합니다.
var body = document.body; // Safari
var html = document.documentElement; //
Chrome, Firefox, IE and Opera places the overflow at the <html> level, unless else is specified. Therefore, we use the
documentElement property for these browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;