Element.scrollLeft

속성 은 Element.scrollLeft요소의 콘텐츠가 왼쪽 가장자리에서 스크롤되는 픽셀 수를 가져오거나 설정합니다.

요소 direction가 rtl(오른쪽에서 왼쪽으로)인 경우 스크롤 막대 scrollLeft가 0가장 오른쪽 위치에 있을 때(스크롤된 콘텐츠의 시작 부분)이고 콘텐츠 끝으로 스크롤할 때 점점 음수입니다.

임의의 정수 값으로 지정할 수 있습니다. 하지만:

• 요소를 스크롤할 수 없는 경우(예: 오버플로가 없는 경우) scrollLeft 로 설정됩니다 0.
• 0보다 작은 값 ( 0오른쪽에서 왼쪽 요소 보다 큼)으로 지정된 경우 로 scrollLeft설정됩니다 0.
• 콘텐츠를 스크롤할 수 있는 최대값보다 큰 값으로 지정하면 최대값 scrollLeft으로 설정됩니다.

경고: 디스플레이 스케일링을 사용하는 시스템 scrollLeft에서는 10진수 값을 제공할 수 있습니다.

값

number

예

HTML

<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button">Slide right</button>

CSS

#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}

Javescript

const button = document.getElementById('slide');

button.onclick = function () {
  document.getElementById('container').scrollLeft += 20;
};

결과