Scrollbar

Style

The component uses native scrollbar by default and relies entirely on browser scrollbar styles.

If you need to customize scrollbar styles, you can do so through CSS. Add the class to the StkTable node.

<StkTable className="scrollbar" />

.scrollbar::-webkit-scrollbar {
    /* ..... */
}

The following example uses ::-webkit-scrollbar to style the scrollbar.

loading

Effective in browsers with Blink or webkit engines (Chrome, Safari, Opera) (refer to ::-webkit-scrollbar | MDN).

Built-in Scrollbar

Built-in DOM-implemented scrollbar, enabled via props.scrollbar.

Can solve scrolling white screen issues.

<StkTable 
  virtual
  scrollbar 
></StkTable>
<StkTable
  virtual
  :scrollbar="{ width: 10, height: 10 }"
></StkTable>

Note

• Only effective when using virtual scrolling (virtual).
• Not effective on mobile devices.

loading

API Reference

ScrollbarOptions Type

interface ScrollbarOptions {
  /** 是否启用滚动条 */
  enabled?: boolean;
  /** 垂直滚动条宽度 default: 8 */
  width?: number;
  /** 水平滚动条高度 default: 8 */
  height?: number;
  /** 滚动条滑块最小宽度 default: 20 */
  minWidth?: number;
  /** 滚动条滑块最小高度 default: 20 */
  minHeight?: number;
}

Style Customization

You can customize the appearance of the scrollbar using CSS variables:

.stk-table {
  --scrollbar-thumb-color: #c1c1d7;
  --scrollbar-thumb-hover-color: #a8a8c1;
  --scrollbar-track-color: transparent;
}

/* 深色主题 */
.stk-table.dark {
  --scrollbar-thumb-color: rgba(93, 96, 100, .9);
  --scrollbar-thumb-hover-color: #727782;
}

Key Scroll

Key	Description	Function
ArrowUp	Up arrow key	Scroll up one row
ArrowDown	Down arrow key	Scroll down one row
ArrowLeft	Left arrow key	Scroll left 50px
ArrowRight	Right arrow key	Scroll right 50px
PageUp	--	Scroll up one page
PageDown	--	Scroll down one page
Home	--	Scroll to top
End	--	Scroll to bottom