HTML DOM Element scrollLeft 속성

정의와 사용법

scrollLeft 속성 설정 또는 반환 요소 내용 수평 스크롤의 픽셀 수.

또는 참조:

scrollTop 속성

CSS overflow 속성

onscroll 이벤트

예제

예제 1

"myDIV"의 스크롤된 내용의 픽셀 수를 가져옵니다:

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

직접 테스트해 보세요

예제 2

"myDIV"의 내용을 수평으로 50 픽셀, 수직으로 10 픽셀 스크롤합니다:

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

직접 테스트해 보세요

예제 3

"myDIV"의 내용을 수평으로 50 픽셀, 수직으로 10 픽셀 스크롤합니다:

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

직접 테스트해 보세요

예제 4

<body>의 내용을 수평으로 30 픽셀, 수직으로 10 픽셀 스크롤합니다:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

직접 테스트해 보세요

문법

scrollLeft 속성 반환:

element.scrollLeft

scrollLeft 속성 설정:

element.scrollLeft = pixels

속성 값

값 설명
pixels

요소 내용 수평 스크롤의 픽셀 수.

  • 이 숫자가 음수이면, 이 숫자를 0으로 설정합니다.
  • 요소가 스크롤할 수 없으면, 이 숫자를 0으로 설정합니다.
  • 이 숫자가 허용 가능한 최대 값보다 크면, 이 숫자를 최대 값으로 설정합니다.

반환 값

타입 설명
숫자 요소 내용 수평 스크롤의 픽셀 수.

브라우저 지원

모든 브라우저가 지원합니다 element.scrollLeft：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원 지원