Scrollbar

Brief Introduction

The Scrollbar component provides scrolling functionality when content exceeds the container bounds. You can use <MYScrollbar></MYScrollbar> or <MYScrollbar /> to implement a scrollbar.

Using Local Scrollbar

Both Horizontal and Vertical Scrollbars

Enable both horizontal and vertical scrollbars with corner connection:

Code Demo

11111111111111111111111111111

<template>
  <MYScrollbar widthX ScrollWidth='20px' corner>
    <MYText size='30rem'>11111111111111111111111111111</MYText>
  </MYScrollbar>
</template>

展开代码

Scrollbar Colors

Customize the thumb, track, and hover colors:

Code Demo

111111

<template>
  <MYScrollbar 
    height='500px' 
    thumbColor='#ff0000' 
    thumbHoverColor='#2c2' 
    trackColor='#797'
  >
    <MYText size='30rem'>111</MYText>
    <MYText size='30rem'>111</MYText>
  </MYScrollbar>
</template>

展开代码

Disable Scrolling

Disable the scrolling functionality:

Code Demo

222222

<template>
  <MYScrollbar height='500px' Maxheight='800px' disabledScroll>
    <MYText size='30rem'>222</MYText>
    <MYText size='30rem'>222</MYText>
  </MYScrollbar>
</template>

展开代码

Set Max Height

Set the maximum height to 800px:

Code Demo

333333

<template>
  <MYScrollbar height='500px' Maxheight='800px'>
    <MYText size='30rem'>333</MYText>
    <MYText size='30rem'>333</MYText>
  </MYScrollbar>
</template>

展开代码

Combined Usage

Combine multiple props:

Code Demo

444444

<template>
  <MYScrollbar 
    height='600px' 
    Maxheight='1000px' 
    thumbColor='#fff' 
    thumbHoverColor='#191919' 
    trackColor='#2c2'
  >
    <MYText size='30rem'>444</MYText>
    <MYText size='30rem'>444</MYText>
  </MYScrollbar>
</template>

展开代码

API Reference

Props

Prop	Description	Type	Options	Default
height	Scrollbar height	string	px/em/rem/dynamic	—
maxHeight	Maximum scrollbar height	string	px/em/rem/dynamic	—
ScrollWidth	Scrollbar width	string	px/em/rem/dynamic	—
widthX	Enable horizontal scrollbar	boolean	—	false
thumbColor	Thumb color	string	Hex or named color	—
thumbHoverColor	Thumb hover color	string	Hex or named color	—
trackColor	Track color	string	Hex or named color	—
disabledHeight	Disable vertical scrollbar	boolean	—	false
disabledWidth	Disable horizontal scrollbar	boolean	—	false
disabledScroll	Disable scrolling functionality	boolean	—	false
corner	Connect corner when both scrollbars are enabled	boolean	—	false
tag	Container tag	string	Any HTML tag	div

Type Definitions

interface ScrollbarProps {
  height?: string;
  maxHeight?: string;
  ScrollWidth?: string;
  widthX?: boolean;
  thumbColor?: string;
  thumbHoverColor?: string;
  trackColor?: string;
  disabledHeight?: boolean;
  disabledWidth?: boolean;
  disabledScroll?: boolean;
  corner?: boolean;
  tag?: string;
}