souhe / reactscrollbar Goto Github PK

Please add window, document props to use scrollarea inside iframe.

Seems like a no-css version is broken.

When import this lib inside component as import ScrollArea from 'react-scrollbar/no-css' is gives an error:

Module not found: Error: Cannot resolve module 'react-scrollbar/no-css' in ...

Use reference to access ScrollArea HOC, can log it's methods and nodes. But can't scroll to offset needed.

Has anyone tried using this in a modal pop-up?
It doesn't seem to add <div class="scrollbar-container"></div> which holds the scrollbar.
I'd appreciate any suggestions on how it's done.

Hey @souhe,

Great job in this component.

I figured it out when there are more than 50 elements, let say images, the componente (scroll) it's getting more and more slower. In some point it's impossible to make scrolling up or down smothly, in fact you have to wait almost 1 sec to got down or up.

Is there any way to improove this performance issue? I have some knowledge in javascript and it would be a pleasure to help you.

PS: Going deeper on your code I saw you are using react-motion to do this kind of moving animation, i think this is not too much optimized to handle a big amount of elements. What do you think?

Cheers.

Cheers.

when rendering page in Internet Explorer 11 invariant.js throws error:

e.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

chrome, firefox, safari, opera work just fine;
main.js as basic as it gets:

import React from 'react';
import {render} from 'react-dom';
import ScrollArea from 'react-scrollbar';

render(<ScrollArea><div>hello</div></ScrollArea>, document.getElementById('app'));

When i was looking for solution i managed to make a scenario (in real app, with router.js) when i saw in ReactReconciler:

Unable to get property 'getNativeNode' of undefined or null reference.

But i forgot how exactly and cant provide info how to reproduce it anymore.

On above i've found
facebook/react#6271,
facebook/react#6246
may those be connected to this issue?

installed packages:

"dependencies": {
    "autoprefixer": "6.3.6",
    "babel-loader": "6.2.4",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-polyfill": "6.9.1",
    "babel-preset-es2015": "6.9.0",
    "babel-preset-react": "6.11.0",
    "babel-preset-stage-0": "6.5.0",
    "bundle-loader": "0.5.4",
    "classnames": "2.2.5",
    "css-loader": "0.23.1",
    "debug-levels": "0.2.0",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "gen-uid": "0.0.2",
    "immutable": "3.8.1",
    "less": "2.7.1",
    "less-loader": "2.2.3",
    "lodash": "4.13.1",
    "moment": "2.13.0",
    "nuka-carousel": "2.0.2",
    "postcss-loader": "0.9.1",
    "pure-render-decorator": "1.1.1",
    "react": "15.1.0",
    "react-dom": "15.1.0",
    "react-dropzone": "3.5.1",
    "react-highcharts": "8.4.0",
    "react-intl-tel-input": "3.1.0",
    "react-lazyload": "2.1.3",
    "react-mixin": "3.0.5",
    "react-modal": "1.3.0",
    "react-notification-system": "0.2.7",
    "react-redux": "4.4.5",
    "react-router": "2.5.1",
    "react-scrollbar": "0.4.1",
    "react-select": "1.0.0-beta13",
    "react-tooltip": "3.0.7",
    "redux": "3.5.2",
    "redux-create-reducer": "1.1.1",
    "redux-logger": "2.6.1",
    "redux-thunk": "2.1.0",
    "sortablejs": "1.4.2",
    "style-loader": "0.13.1",
    "superagent": "2.0.0",
    "svg-inline-loader": "0.6.0",
    "svg-inline-react": "1.0.1",
    "url-loader": "0.5.7",
    "webpack": "2.1.0-beta.14",
    "why-did-you-update": "0.0.8"
  },
  "devDependencies": {
    "MD5": "1.3.0",
    "babel-cli": "6.10.1",
    "babel-eslint": "6.1.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-register": "6.9.0",
    "eslint": "2.13.1",
    "eslint-plugin-react": "5.2.2",
    "expect": "1.20.1",
    "glob": "7.0.5",
    "gulp": "3.9.1",
    "gulp-batch": "1.0.5",
    "gulp-clean": "0.3.2",
    "gulp-clean-css": "2.0.10",
    "gulp-concat": "2.6.0",
    "gulp-filter": "4.0.0",
    "gulp-if": "2.0.1",
    "gulp-less": "3.1.0",
    "gulp-mustache": "2.2.0",
    "gulp-plumber": "1.1.0",
    "gulp-rename": "1.2.2",
    "gulp-requirejs": "0.1.3",
    "gulp-rev": "7.1.0",
    "gulp-sourcemaps": "1.6.0",
    "gulp-svg-sprite": "1.3.1",
    "gulp-uglify": "1.5.4",
    "gulp-watch": "4.3.8",
    "isparta": "4.0.0",
    "istanbul": "0.4.4",
    "less-plugin-autoprefix": "1.5.1",
    "mocha": "2.5.3",
    "mock-local-storage": "1.0.2",
    "nock": "8.0.0",
    "react-addons-test-utils": "15.1.0",
    "react-styleguidist": "2.3.1",
    "redux-devtools": "3.3.1",
    "redux-devtools-dock-monitor": "1.1.1",
    "redux-devtools-filterable-log-monitor": "0.6.6",
    "redux-devtools-log-monitor": "1.0.11",
    "redux-mock-store": "1.1.1",
    "redux-slider-monitor": "1.0.6",
    "run-sequence": "1.2.1",
    "superagent-nock": "0.1.1",
    "through2": "2.0.1"
  },

webpack config:

module.exports = {

        entry: {
            app: APP_ENTRY,
            vendor: VENDOR_ENTRY
        },
        output: {
            path: BUILD_PATH,
            publicPath: PUBLIC_PATH,
            filename: '[name]-' + revision + '.js'
        },
        devtool: 'inline-source-map',
        module: {
            loaders: [{
                test: /bootstrap\.less$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap!postcss!less?sourceMap'),
                exclude: /node_modules/
            }, {
                test: /\.less$/,
                loaders: ['style', 'css?sourceMap', 'postcss', 'less?sourceMap'],
                exclude: [/node_modules/, /bootstrap\.less$/]
            }, {
                test: /\.css$/,
                loaders: ['style', 'css?sourceMap', 'postcss'],
                exclude: /node_modules/
            }, {
                test: /\.jsx?$/,
                loaders: ['babel-loader'],
                plugins: ['transform-decorators-legacy'],
                exclude: /node_modules/
            }, {
                test: /\.svg$/,
                loaders: ['svg-inline'],
                exclude: /node_modules/
            }, {
                test: /\.(png|jpg|gif)$/,
                loaders: [
                    'url?limit=1000000'
                ]
            }, {
                test: /\.(woff|eot|ttf])$/,
                loader: 'url-loader',
                exclude: /node_modules/
            }]
        },
        postcss: function () {
            return [autoprefixer];
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor'
            }),
            new ExtractTextPlugin('bootstrap-' + revision + '.css'),
            new webpack.EnvironmentPlugin([
                'NODE_ENV'
            ])
        ]
    };

Dont know what more useful info i could provide.

Hi,
First thanks for this plugin.
Second, does there are a method so i can scroll to bottom?.
Thank you.

Hi,
I'm trying to view the changingChildren example, so I changed the gulp file to

gulp.task('watch', function() {
connect.server({
root: 'examples/changingChildren',
livereload: true,
port: 8003
});
...

Then ran 'gulp watch', but I'm getting 'Uncaught SyntaxError: Unexpected token import main.js:1'

Could you please let me know how to go about it?

Thanks!

let's say we're fetching the content from 5 to 5 sectonds, and it might be diffrend each time;
so the scrollbar should reflect that

Hi,
Does there a way to use object _scrollArea_ from the self element and not the child, like the example below.
Thank you.

class App extends React.Component {
  refreshScroller(){
   this.context.scrollArea.refresh();
 }
 render(){
  return (
    <div>
    <ScrollArea>
content......long content
    </ScrollArea>
    <input type="button" onClick={()=>this.refreshScroller()}/>
    </div>
    );
}
}
App.contextTypes = {
  scrollArea: React.PropTypes.object
};

Occassionaly this happens when the scrollarea re-renders. I know react-motion has an issue with NaN in the style object, which seems to be the cause of this issue. Once this error occurs, the scrollarea is broken and will not scroll.

warning.js:45 Warning:divwas passed a style object that has previously been mutated. Mutatingstyleis deprecated. Consider cloning it beforehand. Check therenderofMotion. Previous style: {height: 194.75812743823147, marginTop: NaN}. Mutated style: {height: 194.75812743823147, marginTop: NaN}.warning @ warning.js:45checkAndWarnForMutatedStyle @ ReactDOMComponent.js:186ReactDOMComponent.Mixin._updateDOMProperties @ ReactDOMComponent.js:770ReactDOMComponent.Mixin.updateComponent @ ReactDOMComponent.js:699ReactDOMComponent.Mixin.receiveComponent @ ReactDOMComponent.js:645ReactReconciler.receiveComponent @ ReactReconciler.js:87ReactChildReconciler.updateChildren @ ReactChildReconciler.js:84ReactMultiChild.Mixin._reconcilerUpdateChildren @ ReactMultiChild.js:216ReactMultiChild.Mixin._updateChildren @ ReactMultiChild.js:351ReactMultiChild.Mixin.updateChildren @ ReactMultiChild.js:326ReactDOMComponent.Mixin._updateDOMChildren @ ReactDOMComponent.js:871ReactDOMComponent.Mixin.updateComponent @ ReactDOMComponent.js:700ReactDOMComponent.Mixin.receiveComponent @ ReactDOMComponent.js:645ReactReconciler.receiveComponent @ ReactReconciler.js:87ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:562ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66ReactCompositeComponentMixin.receiveComponent @ ReactCompositeComponent.js:405ReactReconciler.receiveComponent @ ReactReconciler.js:87ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:562ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473ReactCompositeComponent_updateComponent @ ReactPerf.js:66ReactCompositeComponentMixin.performUpdateIfNecessary @ ReactCompositeComponent.js:421ReactReconciler.performUpdateIfNecessary @ ReactReconciler.js:102runBatchedUpdates @ ReactUpdates.js:129Mixin.perform @ Transaction.js:136Mixin.perform @ Transaction.js:136assign.perform @ ReactUpdates.js:86flushBatchedUpdates @ ReactUpdates.js:147ReactUpdates_flushBatchedUpdates @ ReactPerf.js:66Mixin.closeAll @ Transaction.js:202Mixin.perform @ Transaction.js:149ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62enqueueUpdate @ ReactUpdates.js:176enqueueUpdate @ ReactUpdateQueue.js:24ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue.js:190ReactComponent.setState @ ReactComponent.js:65i.value @ scrollArea.js:1

Why dist folder is not included in tags?

Good afternoon. When I use component "ScrollArea", I get this warning "Warning: You are manually calling a React.PropTypes validation function for the scrollArea prop on t. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details".
Could you tell how can I fix this?

Basically, the type of app I'm creating would greatly benefit from being able to use the arrow keys and the middle mouse click in order to scroll much faster, and I think all of that would be handled by the scroll event.

I've opted to not submit a PR; many things about this lib do not fit my requirements, and so I've decided to use a different one. Thanks.

Hello. I need to render channel with a lot of messages. I wrapped messages into Component which detects componentDidUpdate and calls some handler like this:

scrollBottomHandler() { setTimeout(() => { this.context.scrollArea.scrollBottom() }, 0) }

(without setTimeout is does not works)

I use smoothScrolling={true}. But when I render the channel for the first time, I do not need such effect to scroll to needed position.

1. How can I scroll bottom without smooth scrolling, but use it in another cases?
2. Is there any other way to refresh list after it was rendered without using setTimeout()? I get no-css.js?a829:1 Uncaught TypeError: Cannot read property 'offsetHeight' of null(…)

Just wondering the license of the project. Could you add one so that others including myself can provide the correct documentation.

You can see how to quickly add a license here: https://help.github.com/articles/open-source-licensing/

Thanks for this great project!

I noticed that when I Use scroll area all the input type range in the page has a bug were changing the value of any of them keeps it clicked and focused.

How to reproduce?
Just use input range in any view that has this component running.

Failed prop type: Invalid prop style.display supplied to Motion.

When using:

            <ScrollArea
              style={{height: '100vh'}}
              verticalScrollbarStyle={{display: 'none'}}> ... 

My case:
I have visible 2 elements.
If I scroll to the end of the list and delete the last element
before
container become smaller but shouldn't because I still have more than 2 elements
after
and in moment when I scroll container growing to the normal size

Scrolbar.jsx componentWillReceiveProps, when i delete last element, return this:

old props:
realSize: 216, containerSize: 72, position: 144
next props:
realSize: 180, containerSize: 36, position: 144

but for correct display it should have this props:
realSize: 180, containerSize: 72, position: 108

So instead to cut containerSize it should change position

Update:
I forgot mentioned, I don't use child component, only a render element function, so I can't use scrollArea.refresh in this situation

Hi,

I've installed the component via NPM

Then imported:

import ScrollArea from 'react-scrollbar';

On save I'm getting the following error

gulp-notify: [Compile Error] Cannot find module '!!./../../node_modules/css-loader/index.js!./../../node_modules/less-loader/index.js!./scrollbar.less' from '/Users/dave/websites/react/node_modules/react-scrollbar/dist'

when i use this method, the scrollbar "jumps" to its new position and DOES NOT scroll it.
is it possible to do so?

Blocked scroll page, when we haven't items in scrollArea(we have fixed height).
How does it solve?

Hello
Please add option to include/re-style up/down scroll arrows with reasonable defaults of

scrollXTo(topPosition)
scrollYTo(leftPosition)

Thanks

Warning: require('react/addons') is deprecated. Access using require('react-addons-{addon}') instead.

I'm getting ReferenceError: window is not defined errors during my build process, is there a way around this?

Hello,

I've tried to use css3 transforms instead of margins, but it doesn't work.

Any thoughts?

Thanks

See Upgrading from 0.3.* to 0.4.0 for react-motion

https://github.com/chenglou/react-motion/wiki#upgrading-from-03-to-040

Motion's style now only takes values intended to be interpolated. Previously it allowed you to pass {x: spring(0), y: 'randomUnrelatedStuffHere'}. This is now disallowed. Simply pass them to the component you're styling in your children function.

Hi. Thank you for nice component.
I faced with issue with react server rendering, when runtime can't access navigator.userAgent and rendering fails. I looked into and found that it is style-loader and its isOldIE method (https://github.com/webpack/style-loader/blob/6664a954/addStyles.js#L13).
I used quick and dirty workaround — custom production build config with ExtractTextPlugin to build css into separate file.
Maybe it is good to do so in your component. Or maybe you can explain, why you choose inline css.

@souhe
How to know Scroller is at the bottom ?

I've added the scrollbar but I can't see the scrollbars and neither can I scroll. Using react version 0.14.7

Thank you for this component.
I cannot find scrollArea.css in the dist file under css.
It appears empty.
Thank you,
b

<div class="scrollbar-container vertical"></div> is absent after component render. And will appears only after scrolling.

Hello,

I installed your module and all I can do what I want, the only problem is that when I scroll is jerky, I have not a linear scroll as in the demo.

I have this error appears: Handling of 'wheel' input event was delayed for 110 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.

There is there a solution?

Best regards,

I'm getting ReferenceError: window is not defined errors during build process on server side. Same on 0.4.0 and 0.5.0. I tried to redefine window, but it doesn't changed the situation. The errors appear even while import on this line of code return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())

Here is my code:

import ScrollBar from 'react-scrollbar const ScrollArea = ({ children, props }) => { return ( <ScrollBar speed={0.2} horizontal={false} vertical={true} contentWindow={window || {}} ownerDocument={document || {}} {...props} > <div> {children} </div> </ScrollBar> ) }

The requirement is to have a dynamic width size for a scrollable area.
But scrollbar-container div only shows when scrollarea-content is dragged.
How can we enforce the scrollbar div to be shown on page load?

When the use presses mouse button on a stick and drags it to the content of the scrollable area, the text in the area gets selected.

See: FutureProcessing/TestCaseViewer#11

Good morning,

I'm pretty surprised to find a bug of this kind.
Perhaps i'm doing something wrong.

With the following code as example, if i scroll within the second scrollbar, the first one will scroll too.

<ScrollBar
  speed={0.8}
  style={{height: '400px'}}
  horizontal={false}
  smoothScrolling= {true}
  minScrollSize={40}>
  <div style={{height: '800px', padding: '40px', border: '1px solid grey'}}>
    <ScrollBar
      speed={0.8}
      style={{height: '200px'}}
      horizontal={false}
      smoothScrolling= {true}
      minScrollSize={40}>
        <div style={{height: '400px', padding: '40px', border: '1px solid,pink'backgroundColor: '#C2BFBF', color: 'white'}}>
      </div>
    </ScrollBar>
  </div>
</ScrollBar>

You can see the problem in this small video-clip : https://vid.me/qNTm

Thank for the answer,
Luc

Hi @souhe ,
When i try to scroll to bottom and the content height is smaller than the container height, the content will be pushed down(because _topPosition_ become positive), so may you want to fix the following:

    scrollBottom(){
      if(this.state.realHeight>this.state.containerHeight)
        this.setState({topPosition: -(this.state.realHeight - this.state.containerHeight)});
    }

the same for scrollRight.
Thanks.

I am using the most basic setup, here is the code:

            <ScrollArea speed={0.8} smoothScrolling={true} className="area" contentClassName="content" horizontal={false}>
                <div className="col-xs-3 tab-wrapper">
                    <ul className="nav nav-tabs tabs-left sideways">
                        {showSupport?
                            <li className={this.state.tabNum == 0?"active":""}>
                                <a onClick={() => this.onClick(0)}>Support</a>
                            </li>
                        :undefined}
                        {showBilling?
                            <li className={this.state.tabNum == 1?"active":""}>
                                <a onClick={() => this.onClick(1)}>Billing</a>
                            </li> 
                        :undefined}
                        {showPlan?
                            <li className={this.state.tabNum == 2?"active":""}>
                                <a onClick={() => this.onClick(2)}>Plan</a>
                            </li>
                        :undefined}
                        {this.props.hasDevice?
                            <li className={this.state.tabNum == 3?"active":""}>
                                <a onClick={() => this.onClick(3)}>Device</a>
                            </li>
                        :undefined}
                        {showKitOrder?
                            <li className={this.state.tabNum == 4?"active":""}>
                                <a onClick={() => this.onClick(4)}>Kit Order</a>
                            </li>
                        :undefined}
                    </ul>
                </div>
                <div className="col-xs-9 content-wrapper">
                    <div className="tab-content">
                        {showSupport?
                            <div className={"tab-pane " + (this.state.tabNum==0?"active":"")}>
                                <SupportPanel app={this.props.app}/>
                            </div>
                        :undefined}
                        {showBilling?
                            <div className={"tab-pane " + (this.state.tabNum==1?"active":"")}>
                                <BillingPanel ref="billingPanel" app={this.props.app}/>
                            </div>
                        :undefined}
                        {showPlan?
                            <div className={"tab-pane " + (this.state.tabNum==2?"active":"")}>
                                <PlanPanel app={this.props.app} gotoBilling={this.gotoTab.bind(this,"billing")}/>
                            </div>
                        :undefined}
                        {this.props.hasDevice?
                            <div className={"tab-pane " + (this.state.tabNum==3?"active":"")}>
                                <DeviceConfigPanel ref="deviceConfigPanel" app={this.props.app}/>
                            </div>
                        :undefined}
                        {showKitOrder?
                            <div className={"tab-pane " + (this.state.tabNum==4?"active":"")}>
                                <KitOrder app={this.props.app} gotoBilling={this.gotoTab.bind(this,"billing")}/>
                            </div>
                        :undefined}
                    </div>
                </div>
            </ScrollArea>

The code starts with the default tab opened (tabNum == 3). If I scroll that tab and then switch tabs and scroll again, it works great BUT if on start on tabNum 3 I do nothing but switch tabs and then try to scroll, I see an error msg on console and the scroller locks. Here is the message:

console.js?93a0:26 Warning: `NaN` is an invalid value for the `marginTop` css style property.console.(anonymous function) @ console.js?93a0:26warning @ warning.js?0260:44warnStyleValueIsNaN @ CSSPropertyOperations.js?222a:88warnValidStyle @ CSSPropertyOperations.js?222a:120setValueForStyles @ CSSPropertyOperations.js?222a:176CSSPropertyOperations_setValueForStyles @ ReactPerf.js?ef93:66_updateDOMProperties @ ReactDOMComponent.js?1302:802updateComponent @ ReactDOMComponent.js?1302:690receiveComponent @ ReactDOMComponent.js?1302:647ReactDOMComponent_receiveComponent @ ReactPerf.js?ef93:66receiveComponent @ ReactReconciler.js?6bfa:103updateChildren @ ReactChildReconciler.js?ff46:85_reconcilerUpdateChildren @ ReactMultiChild.js?c87d:178_updateChildren @ ReactMultiChild.js?c87d:271updateChildren @ ReactMultiChild.js?c87d:259_updateDOMChildren @ ReactDOMComponent.js?1302:845updateComponent @ ReactDOMComponent.js?1302:691receiveComponent @ ReactDOMComponent.js?1302:647ReactDOMComponent_receiveComponent @ ReactPerf.js?ef93:66receiveComponent @ ReactReconciler.js?6bfa:103_updateRenderedComponent @ ReactCompositeComponent.js?cd59:661_performComponentUpdate @ ReactCompositeComponent.js?cd59:643updateComponent @ ReactCompositeComponent.js?cd59:572ReactCompositeComponent_updateComponent @ ReactPerf.js?ef93:66performUpdateIfNecessary @ ReactCompositeComponent.js?cd59:511performUpdateIfNecessary @ ReactReconciler.js?6bfa:122runBatchedUpdates @ ReactUpdates.js?ce09:143perform @ Transaction.js?6dff:136perform @ Transaction.js?6dff:136perform @ ReactUpdates.js?ce09:89flushBatchedUpdates @ ReactUpdates.js?ce09:165ReactUpdates_flushBatchedUpdates @ ReactPerf.js?ef93:66closeAll @ Transaction.js?6dff:202perform @ Transaction.js?6dff:149batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70:63enqueueUpdate @ ReactUpdates.js?ce09:194enqueueUpdate @ ReactUpdateQueue.js?fd2c:22enqueueSetState @ ReactUpdateQueue.js?fd2c:201ReactComponent.setState @ ReactComponent.js?a225:65animationRender @ scrollArea.js?5ff8:1t @ scrollArea.js?5ff8:1
console.js?93a0:26 [WDS] Proxy error.

You can see the exception on this demo page:
https://chakryotik.buchhandlung.de/shop/
Happens if you resize the browser window.

Looks like this.content is not defined in the computeSizes() call.
This happens only on IE, all other browsers are fine.

scrollTop()
scrollBottom()
if I want to let it always on the Top or Bottom when data changed. but It no effect. it always on the penult area.
waitting for your help. thanks!

If the ScrollArea is big enough to contain contents vertically without scrolling, then the scroll wheel stops working.
It seems handleWheel invokes composeNewState which returns a newState without topPosition defined.
Since this.state.topPosition === 0, then
if(this.state.topPosition !== newState.topPosition || this.state.leftPosition !== newState.leftPosition){
e.preventDefault();
}
invokes preventDefault.

Either the newState should have topPosition defined, or its definition should be checked, like:
if ( (r.topPosition && this.state.topPosition!==r.topPosition)||(r.leftPosition && this.state.leftPosition!==r.leftPosition)) {
e.preventDefault();
}

Hi,

When I scroll menu to bottom and collapse menu(in the time, real height < container height), I can't scroll to top.

I've fork the project and add the code to fixed the problem in /src/js/ScrollArea.js as below.

composeNewState(deltaX, deltaY){
        let newState = this.computeSizes();

        if(this.canScrollY(newState)){
            newState.topPosition = this.computeTopPosition(deltaY, newState);
        >} else {
        >    newState.topPosition = 0;
        >}
       ......
}

Best regards.