ojame / react-scrollbars

React-Scrollbars

Installation

npm install react-scrollbars --save

Basic usage

var React = require('react');
var ScrollbarWrapper = require('react-scrollbars').ScrollbarWrapper;

var Component = React.createClass({
  render: function() {
    return (
      <ScrollbarWrapper>
        <div>
            content
        </div>
      </ScrollbarWrapper>
    );
  }
});

module.exports = Component;

Properties

vertical={true}

values: true, false

Force hide the scrollbars on the y-axis, regardless of what overflow value is set in the CSS. Works best with overflow-y: hidden.

horizontal={true}

values: true, false

Force hide the scrollbars on the x-axis, regardless of what overflow value is set in the CSS. Works best with overflow-x: hidden.

offest={2}

values: any integer

Changes the space (margin) around the scrollbar component.

scrollbarThickness={10}

values: any integer

Controls the width (in y-axis) or height (in x-axis) of the scrollbar.

Styles

For optimized behavior add the following definitions to your stylesheets:

  .ScrollbarContainer--scrolling {
    -webkit-touch-callout: none;
    user-select: none;
  }
  
  .ScrollbarContainer>div::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  .ScrollbarContainer>div::scrollbar {
    width: 0;
    height: 0;
  }

react-scrollbars's Issues

Chrome mac issues on your demos.

Hey, I'm checking your demos, and seem to be having scroll issues. (With other scroll libraries as well. Did mac change something?)

Seems to be showing native scrollbar next to whats visible.

ContainerClass is not a function

When i import the scrollbarWrapper, it says ContainerClass is not a function

Error when I try to load ScrollBarWrapper

Hello, I want try your module and I've error :
build.js:15397 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofProfil.

build.js:14954 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method ofProfil.

My code source :

import React from 'react';
import {
  Grid,
  Cell
} from "react-mdl";
var ScrollbarWrapper = require('react-scrollbar').ScrollbarWrapper;
var ProfilHeader = require('./children/profilHeader/ProfilHeader.js');
var ProfilExperiences = require('./children/profilExperiences/ProfilExperiences.js');
var ProfilEducations = require('./children/profilEducations/ProfilEducations.js');
var ProfilHobbies = require('./children/profilHobbies/ProfilHobbies.js');
var ProfilSkills = require('./children/profilSkills/ProfilSkills.js');
var ProfilLanguages = require('./children/profilLanguages/ProfilLanguages.js');
import './styles/less/Profil.less';

var Profil = React.createClass({

    render: function() {
        return (
          <ScrollbarWrapper>
            <Grid className="searchList" style={{ paddingRight: '15px'}}>
              <Cell col={12} tablet={12} phone={12}>
                <div className="profil">
                  <ProfilHeader />
                  <ProfilExperiences />
                  <ProfilEducations />
                  <ProfilHobbies />
                  <ProfilSkills />
                  <ProfilLanguages />
                </div>
              </Cell>
            </Grid>
          </ScrollbarWrapper>
        );
    }
});

module.exports = Profil;

Any idea ?

React-scrollbar workable with bower

Any one using bower and don't like npm for dependency can use bower install and wiredep react-scrollbars into project can do it in below way.

bower install react-scrollbars --save

as this component is only managed by npm , it will not automatically wiredep by grunt and and the link will bot be added automatically to your index.html. to work this with bower and grunt wiredep, create a bower.json file and add below line into it. make sure to add "main" which will tell bower and grunt which file need to be added into the index file.

// bower.json
{
"name": "hello-world-element",
"version": "1.0.1",
"description": "Web Component example using VanillaJS.",
"license": "MIT",
"main": "./src/js/components/react-scrollbar.js"
}

Add LICENSE

Scrollbars overlap

If both scrollbars, they overlap on OS X machines (where scrollbars aren't set to always visible)

Scrollbars either track to slowly or are too short

Prevent `user-select` when scrolling

Detect native scrollbar width

A static of 15 is used at the moment (that's the most obvious width). Would be great to detect the width instead.

For IE9 support, all that's needed is `MsTransform`

Firefox 33.1.1 on OSX showing OS and custom scrollbars

Exposed states and functions need to be namespaced

Preferably with __scrollbar

Horizontal and vertical scrollbars overlap

Over calculations, or something, too many scrollbars in FF

Dynamic page loading failed Error: Cannot find module "react/addons"

Anyone have idea of this issue?

Using ES6: import { ScrollbarWrapper } from 'react-scrollbars';,
Installed react-addons-test-utils,
Installed react-addons,
Updated in webpack config:

webpack: {
  ...
  externals: {
      ...
      'react/addons': true,
   },
},

Still no luck :(

Warning: ScrollbarWrapper is accessing getDOMNode or findDOMNode inside its render().

Hi there,

Getting the following warning when mounting the component.

Warning: ScrollbarWrapper is accessing getDOMNode or findDOMNode inside its render(). render() should be a pure function of props and state. It should never access something that requires stale data from the previous render, such as refs. Move this logic to componentDidMount and componentDidUpdate instead.

Seems to be mixins/scrollbar.jsx accessing getDOMNode then directly calling into render causing the problem. Any plans on improving this?

Use `translate` instead of `top` and `left`

For performance reasons.

Sticky scrollbars when container spans out of the viewport

Thanks for this neat little library! We're successfully using it in production at Effektif (http://www.effektif.com).

We use it to display a list that is scrollable horizontally. When the list grows long, the horizontal scrollbar may sit outside of the visible part of the screen. Therefore, we extended your lib so that scrollbars can be configured to be sticky to the bottom of the screen if the scroll container spans out of the viewport. You can see an example on the examples page of our fork (https://github.com/effektif/react-scrollbars).

Would you be interested to include this feature? I would be happy to submit a PR.

Fix warnings

Warning: Unsupported style property padding-right. Did you mean paddingRight?

Warning: Unsupported style property margin-bottom. Did you mean marginBottom?

window is not defined. Can't use with isomorphic react app

window is not defined. Can't use with isomorphic react app