custom-horizontal-scroll

Demo

demo

Installation

$ npm install custom-horizontal-scroll

Usage

Here is a quick example to get you started, it's all you need. Horizontal scroll float at the bottom of window. Here, window is considered as the default vertical scroll parent.

import React from "react";
import { IWithCustomScroll, withCustomScroll } from "custom-horizontal-scroll";
import { Table } from "./Table";

const Layout = (props: IWithCustomScroll) => {
  return (
      <div id={props.customScroll.id}>
        <Table /> /* Has long width */
      </div>
  );
};

export default withCustomScroll(Layout);

In the above code, withCustomScroll is a HOC, Which provides the custom scroll instance. You have to set the customScroll.id to the parent of target horizontal scroll element.

Customizations

Set custom scroll based on a specific vertical scroll parent

If you have a vertical scroll in a non window element. You can float horizontal scroll inside a specific vertical scroll element. Just add className "vertical-scroll" to the nearest vertical scroll parent element

import React, { useEffect } from "react";
import { IWithCustomScroll, withCustomScroll } from "custom-horizontal-scroll";
import { Table } from "./Table";

const Layout = (props: IWithCustomScroll) => {
  return (
     <div className="vertical-scroll"> /* Has vertical scroll */
      <div id={props.customScroll.id} className="layout-container">
        <Table />
      </div>
     </div>
  );
};

export default withCustomScroll(Layout);

Adjust scroll position dynamically

You can adjust the horizontal scroll dimensions dynamically. It may need if you have a fixed position element at the bottom of view port. For such case, We have to adjust the scroll bottom position. Let's check the example.

import React, { useEffect } from "react";
import { IWithCustomScroll, withCustomScroll } from "custom-horizontal-scroll";
import { Table } from "./Table";

const Layout = (props: IWithCustomScroll) => {
  useEffect(() => {
    props.customScroll.updateScrollBottomHeight("20px");
  }, [])
  return (
      <div id={props.customScroll.id} className="layout-container">
        <Table />
      </div>
  );
};

export default withCustomScroll(Layout);

Let be the width of the fixed position element is 20px. In the above code, The scroll bottom lifted to "20px" from bottom.