Scrollbar

Scrollbar (스크롤바)

브라우저의 네이티브 스크롤바를 대체하는 컴포넌트예요.

출처: 문서

본문

기본 사용법 (Basic usage)

height 속성을 사용해서 스크롤바의 높이를 설정해요. 설정하지 않으면 부모 컨테이너의 높이에 따라 적응해요.

가로 스크롤 (Horizontal scroll)

요소의 너비가 스크롤바의 너비보다 크면 가로 스크롤바가 표시돼요.

.scrollbar-flex-content {
  display: flex;
  width: fit-content;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

최대 높이 (Max height)

요소의 높이가 최대 높이를 초과할 때만 스크롤바가 표시돼요.

수동 스크롤 (Manual scroll)

setScrollTop과 setScrollLeft 메서드를 사용하면 스크롤바를 수동으로 제어할 수 있어요.

import { onMounted, ref } from 'vue'

import type { ScrollbarInstance } from 'element-plus'

type Arrayable = T | T[]

const max = ref(0)
const value = ref(0)
const innerRef = ref()
const scrollbarRef = ref()

onMounted(() => {
  max.value = innerRef.value!.clientHeight - 380
})

const inputSlider = (value: Arrayable) => {
  scrollbarRef.value!.setScrollTop(value as number)
}
const scroll = ({ scrollTop }: { scrollTop: number }) => {
  value.value = scrollTop
}
const formatTooltip = (value: number) => `${value} px`

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.el-slider {
  margin-top: 20px;
}

무한 스크롤 (Infinite scroll) 2.10.0

스크롤바가 끝에 도달하면 end-reached가 트리거돼요. 무한 스크롤로 사용할 수 있어요.

API

Attributes

Name Description Type Default
height 스크롤바의 높이 string / number —
max-height 스크롤바의 최대 높이 string / number —
native 네이티브 스크롤바 스타일 사용 여부 boolean false
wrap-style wrap 컨테이너의 스타일 string / object —
wrap-class wrap 컨테이너의 클래스 string —
view-style view의 스타일 string / object —
view-class view의 클래스 string —
noresize 컨테이너 크기 변경에 반응하지 않음. 컨테이너 크기가 변하지 않는다면 설정해서 성능을 최적화하는 게 좋아요 boolean false
tag view의 요소 태그 string div
always 항상 스크롤바 표시 boolean false
min-size 스크롤바의 최소 크기 number 20
id 2.4.0 view의 id string —
role 2.4.0 a11y view의 role string —
aria-label 2.4.0 a11y view의 aria-label string —
aria-orientation 2.4.0 a11y view의 aria-orientation enum —
tabindex 2.8.3 wrap 컨테이너의 tabindex number / string —
distance 2.10.5 end-reached 이벤트 트리거 거리(px) number 0

Events

Name Description Type
scroll 스크롤할 때 트리거, 스크롤 거리 반환 Function
end-reached 2.10.0 스크롤 끝이 트리거될 때 트리거 Function

Slots

Name Description
default 기본 내용 커스터마이징

Exposes

Name Description Type
handleScroll 스크롤 이벤트 처리 Function
scrollTo 특정 좌표로 스크롤 Function
setScrollTop 스크롤 상단까지의 거리 설정 Function
setScrollLeft 스크롤 왼쪽까지의 거리 설정 Function
update 스크롤바 상태 수동 업데이트 Function
wrapRef scrollbar wrap 참조 object

더 알아보기 (Learn more)