Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Scroll Bars

 

이제, 창에 스크롤바를 추가해 보도록 하겠습니다.

스크롤바 추가하기

스크롤바는 대개 사용자가 긴 문서를 이동하기 위해 사용됩니다. 또한 어떤 범위에 해당하는 값을 선택하기 위해서도 사용될 수 있습니다. 스크롤바는 여러 방식으로 생성될 수 있는데, XUL에서는 scrollbar 태그를 이용해서 만들어 집니다. 글상자와 같은 일부 요소는 내용이 너무 긴 경우와 같이, 필요에 따라 스크롤바를 추가할 수 있습니다.

이 단원에서는 독립적인 스크롤바의 생성 방법에 대해 다룰 것입니다. 사용자는 스크롤바를 조정하여 값을 설정하게 될 것입니다. 여러분은 그리 많이 사용할 일이 없을 것입니다. 스크롤바는 주요 부분인 조정 가능한 스크롤상자(thumb)와 양 끝단에 있는 2개의 화살표 버튼들로 구성됩니다. 스크롤바는 이러한 모든 요소들을 자동으로 생성합니다.

Image:scroll1.png

스크롤바의 구문은 다음과 같습니다.

<scrollbar
    id="identifier"
    orient="horizontal"
    curpos="20"
    maxpos="100"
    increment="1"
    pageincrement="10"/>

속성은 다음과 같습니다.

id
스크롤바의 유일 식별자.
orient
이 속성은 스크롤바의 방향을 지정합니다. 기본값은 horizontal로, 좌측에서 우측으로 늘어나는 스크롤바를 만듭니다. vertical이라는 속성을 지정할 수도 있는데, 이는 상단에서 하단으로 늘어나는 스크롤바를 만듭니다.
curpos
이 속성은 스크롤상자(여러분이 스크롤바에서 앞뒤로 움직일 수 있는 막대)의 현재 위치를 나타냅니다. 이 속성값은 0부터 maxpos 속성에 지정한 값의 범위를 가집니다. 이 속성값은 단위를 필요로 하지 않으며, 기본값은 0입니다.
maxpos
이것은 스크롤상자의 최대 위치를 가리킵니다. 숫자로 나타내며 단위는 없습니다. 기본값은 100입니다.
increment
여기에 명시한 값은 사용자가 스크롤바에 있는 화살표 버튼을 클릭했을 때 curpos 값을 얼마나 변경할 지 지정합니다. 기본값은 1입니다.
pageincrement
여기에 명시한 값은 사용자가 스크롤바의 구간의 쪽를 클릭했을 때, 즉 스크롤상자와 화살표 사이의 영역을 클릭할 때 얼만큼의 curpos값이 변경될지를 지정합니다. 기본값은 10입니다.

위에 있는 구문 예제는 0부터 100까지의 범위를 가지는 스크롤바를 생성할 것입니다. 100이라는 값은 목록에 있는 줄 수 일수 있지만, 여러분이 원하는 어떤 것일 수도 있습니다. 이 예제에서 초기값은 20입니다. 스크롤바의 화살표 중 하나를 클릭하면, 값은 위나 아래로 1씩 바뀌게 됩니다. 스크롤바의 페이지 영역(스크롤박스와 화살표 버튼 사이 영역)을 클릭하면 10만큼 바뀌게 됩니다.

사용자가 스크롤바 화살표를 클릭하면 스크롤상자는 increment값에 지정한 양만큼 이동하게 됩니다. 이 속성값을 증가시키면 클릭할 때마다 더 멀리 이동하게 됩니다. 스크롤바의 좌측단 또는 최상단 위치는 0값을 가지며 우측단과 최하단 위치는 maxpos에 지정된 값을 가집니다.

스크롤바의 값을 조정함으로써, 스크롤상자 부분을 원하는 곳에 위치시키고 화살표를 클릭했을 때 이동범위를 변경할 수 있습니다.

다음에는 툴바를 만드는 방법에 대해 알아보겠습니다.

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: teoli, Suguni
 최종 변경: teoli,