react-master-slave-scroll

MasterSlaveScroll is a React component allowing users to create a fixed side menu whcich is longer than the viewport and scrolls along with the main page in sync.

Demo

A Demo is available here.

Installation

1. Install react-master-slave-scroll using npm. npm install react-master-slave-scroll
2. Import react-master-slave-scroll to use MasterSlaveScroll, Master and Slave components.

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import MasterSlaveScroll, {Master, Slave} from 'react-master-slave-scroll';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <MasterSlaveScroll
          slaveWidthPx={300}
      >
          <Slave>
              <div style={{background:"red", height:"130vh"}}>
                  <p>top</p>
                  <p style={{position:"absolute", bottom:"0"}}>bottom</p>
              </div>
          </Slave>

          <Master>
              <div style={{background:"yellow", height: "160vh"}}></div>
          </Master>
      </MasterSlaveScroll>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

API

MasterSlaveScroll#props

minWidthPx: number

Set min-width attribute to MasterSlaveScroll component.

slaveWidthPx: number, required

Set width attribute to slave component.

fixRight: bool

Fix the slave to right. By default it is false

scrollYListenTimer: number

Set scroll listener delay in milliseconds.

scrollAnimDuration: number

Set animation duration for slave scroll in milliseconds.

onScrollY: func

This function is called on vertical scroll.

onScrollX: func

This function is called on horizontal scroll.

Future scope

Working on it to make it more robust and configurable.