Scrollbar

1 min read

Properties - ScrollbarCfg

Go to ShapeAttrs to learn more about ShapeAttrs.

PropertiesTypeDescription
type'horizontal' | 'vertical'Type of scrollbar
widthnumberWidth,works when type = 'vertical'
heightnumberheight,works when type = 'horizontal'
paddingnumber | number[]Padding
categorySizenumberFor the horizontal scrollbar, it is the width of each category field on the x-axis; for the vertical scroll bar, it is the height of each category field on the x-axis
animatebooleanWhether to animate when scrolling, default follows the animation configuration in view

Types of ScrollbarStyle are as follow:

PropertiesTypeDescription
trackColorstringColor of scrollbar track
thumbColorstringColor of scrollbar thumb
thumbHighlightColorstringHighlight color of scrollbar thumb, 对应主题的 hover.style.thumbColor
lineCapstringDetermines the shape used to draw the end points of scrollbar,is same as property of Canvas lineCap。

Theme setting

You can also config the style of scollbar by theme.

theme: {
  components: {
    scrollbar: {
      // default style
      default: {
        style: {
          trackColor: 'rgba(0,0,0,0)',
          thumbColor: 'rgba(0,0,0,0.15)',
        },
      },
      // config the style of thumb when hover
      hover: {
        style: {
          thumbColor: 'rgba(0,0,0,0.2)',
        },
      },
    },
  },
}