• Rich Function

    You can customize scrollbar, rail, scroll container, etc. Rich APIs and Events

  • Easy To Use

    Just wrap content by <magic-scroll>, a custom scrollbar will show

  • Good compatibility

    Compatible with TypeSciprt, SSR, PC, mobile phone, touch screen

Quick Start


# Install via yarn or npm

yarn add magic-scroll
# OR
npm i magic-scroll -S


// Import magic-scroll in project and wrap the  over-flowing  content

import Scrollbar from 'magic-scroll';
import React from 'react';

class BasicDemo extends React.Component {
  render() {
    return (
      <div className="parent">
        <Scrollbar keepBarShow>
          <div className="child" />
/* css */

.parent {
  height: 100px;

.child {
  height: 400px;
  background: linear-gradient(180deg, #abdcff, #0396ff);
  position: relative;

  .logo {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 120px;
    color: #fff;
    margin: auto;
    img {
      width: 20px;

Rendering result