Scroll

Brief Introduction

The scroll component is used to implement custom scrollbar styles and functionality. You can use <MYScroll></MYScroll> or <MYScroll /> to implement a custom scrollbar.

Note: This style will change the global scrollbar, so the code demo may not show the effect. You can directly observe the effect on the right scrollbar.

About Color Usage

thumbColor

Using thumbColor in MYScroll defines the color of the scrollbar thumb.

Code Demo

<template>
  <MYScroll thumbColor='#ff0000'>Custom red thumb scrollbar</MYScroll>
</template>

展开代码

thumbHoverColor

Use thumbHoverColor to define the color of the thumb on hover.

Code Demo

<template>
  <MYScroll thumbHoverColor='#00ff00'>Green thumb on hover scrollbar</MYScroll>
</template>

展开代码

trackColor

Use trackColor to define the color of the scrollbar track.

Code Demo

<template>
  <MYScroll trackColor='#0000ff'>Blue track scrollbar</MYScroll>
</template>

展开代码

API Reference

Props

Parameter	Description	Type	Options	Default
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	—
width	Scrollbar width	string	Supports CSS width units (e.g., px, em)	—
tag	Container tag	string	Supports all HTML tags	div

Type Definitions

interface ScrollProps {
  thumbColor?: string;
  thumbHoverColor?: string;
  trackColor?: string;
  width?: string;
  tag?: string;
}