malte-wessel / react-custom-scrollbars

React scrollbars component
http://malte-wessel.github.io/react-custom-scrollbars/
MIT License
3.2k stars 578 forks source link

Uncaught TypeError: Cannot read property 'scrollLeft' of null #185

Open iHaiduk opened 7 years ago

iHaiduk commented 7 years ago

When I have vertical scroll and don't have horizontal scroll then I have error of read property. file: webpack:///./node_modules/react-custom-scrollbars/lib/Scrollbars/index.js

Uncaught TypeError: Cannot read property 'scrollLeft' of null
    at Scrollbars.getValues (index.js:172)
    at Scrollbars._update (index.js:602)
    at index.js:592
    at index.js:583
getValues @ index.js:172
_update @ index.js:602
(anonymous) @ index.js:592
(anonymous) @ index.js:583
requestAnimationFrame (async)
./node_modules/raf/index.js.module.exports @ index.js:64
raf @ index.js:581
update @ index.js:591
handleScroll @ index.js:337

Inspector: 172 line 602 line

Example code:

class HomeComponent extends React.Component<IHelloProps, undefined> {

    public static defaultProps: IHelloProps = {
        compiler: "Test",
        count: null,
        framework: "work",
    };

    constructor(props: IHelloProps) {
        super(props);
        this.scrollUpadte = this.scrollUpadte.bind(this);
    }

    public render() {
        return (
            <PureComponent tag={"main"}>
                <HeaderBlock/>
                <Scrollbars
                    autoHeight={true}
                    universal={true}
                    autoHeightMax={"100vh"}
                    onScrollFrame={this.scrollUpadte}
                >
                    <EarlyAccessBlock />
                    <HomeAboutBlock />
                </Scrollbars>
            </PureComponent>
        );
    }

    private scrollUpadte(data: any) {
        const {homeTransparent} = this.props;
        const {scrollTop} = data as any;
        console.log(scrollTop)
    }
}
malte-wessel commented 7 years ago

Should be fixed in 4.2.1. Let me know if not :)

MichaelOstermann commented 7 years ago

@malte-wessel I'm having a similar issue, in my case this.view is null in the getThumbHorizontalWidth method.

Adding if (!this.view) return 0;, similar to your fix in 4.2.1 results with no error happening anymore, but the thumbs became invisible :(

Downgrading to 4.1.1 resolves this issue completely.

Let me know if I can provide more info!