fuermosi777 / react-free-scrollbar

A react module for creating customizable scroll area

React-free-scrollbar

A react module for creating customizable scroll area.

Visit http://fuermosi777.github.io/react-free-scrollbar/ to see demo.

Install

$ npm install --save react-free-scrollbar

or

$ yarn add react-free-scrollbar

Usage

Quick start

import FreeScrollBar from 'react-free-scrollbar';

// must have a wrapper with a certain size

<div style={{width: '300px', height: '100px'}}>
    <FreeScrollBar>
        <h1>The title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </FreeScrollBar>
</div>

Props

className: string optional

Add custom class to the scroller. If you add a custom className to the component, all default styles will not working. You have to also add the following styles in your CSS files:

// if you add "demo" as the custom class
.demo {} // optional
.demo-vertical-track {} // required
.demo-horizontal-track {} // required
.demo-vertical-handler {} // required
.demo-horizontal-handler {} // required

style: object optional

If you just want to add some simple styles, you can pass this prop to the component.

Example:

<FreeScrollerBar style={{width: "100%", height: "100%"}}></FreeScrollerBar>

fixed: boolean optional

You can pass fixed to decide if handler's position: fixed or static. If fixed equals true, then the handler will overlap the content inside the scroller.

autohide: boolean optional

Set true if you want a macOS style auto-hide scroller.

timeout: number optional

The time length of the handler disappears. Default: 2000

tracksize: string

The width of the vertical handler or the height of the horizontal handler. Default: 10px

start: string | object

The starting position of the scroll area, can be descriptive string or an object.

Options: "bottom", "bottom right", "top right", "right", {top: 20, left: 30}

browserOffset: string

The browser scroll bar width. Default: "17px". It should fit for most browsers.

onScrollbarScroll: Function optional

Fired when the scrollbar is scrolled.

onScrollbarScrollTimeout: Number optional

This timeout adds a throttle for onScrollbarScroll. Default is 300. Set to 0 to remove throttle.

Methods

setPosition(pos: {top: number, left: number})

Customization

Adding a custom className to the component will give you power to customize the scrollbar's track and handler. Here is an example:

/* the following code snippet is using Less */
.example-vertical-track {
    background-color: transparent;
    width: 10px;
    transition: opacity 0.3s;
}

.example-horizontal-track {
    background-color: transparent;
    height: 10px;
    transition: opacity 0.3s;
}

.example-vertical-handler {
    width: 8px;
    right: 1px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    &:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

.example-horizontal-handler {
    height: 8px;
    bottom: 1px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    &:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

For more examples, go to http://fuermosi777.github.io/react-free-scrollbar/.

Develop

$ yarn dev

Go to http://localhost:8080.

Publish

$ yarn dist $ npm publish

Update changelog.

react-free-scrollbar's Issues

请问有手动update的API吗？

如果我的元素一开始display为none再去block出来，滚动条宽高都是0哦

不支持ie8

浏览器兼容性在文档里写下吧

IE: object does not support 'assign' property or function

hi,it works well in chrome,but in IE it crash with error"object does not support 'assign' property or function", anyone suffer this problem?

unsupport React16?

onScrollbarScroll function is no params?

onScrollbarScroll 如果有参数 比如滑轮滚动方向，距离top或bottom 的百分百 等，这样更好了吧

Can I configure the minimum length of the scroll bar

When the content is longer, it becomes a line

Start on bottom ?

Hello,
Is possible < FreeScrollBar /> will start (load) in bottom position?
To manage conversations, chat, channel etc..

Best regards,

adding extra width to the container

it's adding extra width, most probably margin, to the right side, where it is placed, of the container. And it's demolising the design. because one side is coming with lesser space within the container.

Missmatch version @0.3.1

Are you aware that in the latest npm package - the dist/index.js was't built with the latest src/index.jsx !!!!

The window has changed and the length of the scroll bar has not changed.

No Horizontal Scrollbars?

No horizontal scrollbars?

I'm assuming no, since I saw no references to scrollLeft in the source code. (whereas scrollUp is present)

Guess I'll work on this myself. (and not share it with anyone else : P -- not out of spite, haha, just cuz I'll probably be too lazy at first)

Does this plug-in support IE?

Does this plug-in support IE?

如何设置初始化的时候就显示滚动条

1. 初始化时，可以设置开始就显示滚动条么？ 现在默认隐藏。
2. 我使用 setPosition 不起作用：
   

Not accounting for different scrollbar widths in different browsers

There is a strange line around when using this component as seen in the screenshot.

After some investigation I noticed that these are the original browser scrollbars, that led me to the hardcoded -15px adjustment to hide the scrollbars in the code. And as you can see here the width of scrollbars is different between operating system https://codepen.io/sambible/post/browser-scrollbar-widths. So this plugin is only working for me on a Mac.

can not position to bottom

could you add a new api for to control scroll position