• 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

# Install via yarn or npm

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

Usage

// 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" />
        </Scrollbar>
      </div>
    );
  }
}
/* 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

MagicScroll.js