React-custom-scrollbars: getScrollbarWidth calculation issue on Chrome

[bellostom]

Hi

First of all really nice work with the plugin.
I have run into an issue however in Windows Chrome (latest version).
I wrap a list with the component and start adding list items. However, the vertical scroll bar never appears
Inspecting the vertical scrollbar element, its display is none.
Further investigation revealed that the getScrollbarWidth method is responsible since it calculates the width to a value of zero
In Firefox it works fine

Any ideas what could be causing this?

Regards

[ash-developer]

getScrollbarWidth function needed for calculate width of native scrollbar and doesn't affect on custom scrollbar
can you provide some code for further help?

[bellostom]

Hi

Based on what I see in
https://github.com/malte-wessel/react-custom-scrollbars/blob/master/src/Scrollbars/index.js#L476

If getScrollbarWidth() returns a falsy value, the scrollbars are not displayed, which explains what I am experiencing and basically I verified it by returning a fixed value

Below is a sample code

render(){
        return (
            <aside className="cart p_abs col-3 row-10 bottom right">
                <div className="cf shoppingcart p_rel row-10 col-12">
                    <Title className="col-12 sctitle"><Icon kind='Shopping'/>Shopping Cart</Title>
                    <Scrollbars style={{height: 425 }}>
                        <List className="p_rel col-12">
                            {CartStore.items.map((item) => {
                                let state = item.status.get();
                                let css = classNames({
                                    'col-12': true,
                                    'paid': state == CartStore.PROCESSED,
                                    'canceled': state == CartStore.CANCELED,
                                });
                                return (
                                    <ListItem key={item.id} justify="between" className={css}>
                                        <div className="col-6 gamedesc">
                                            <span className="gameType">{item.gameType}</span>
                                            <span>{item.gameName}</span>
                                        </div>
                                        <span className="col-4 TotalCostPerGame">{locale.formatCurrency(item.cost)}</span>
                                        <DeleteCartItem status={item.status.get()} onDelete={this.deleteItem.bind(this, item)}/>
                                    </ListItem>
                                )
                            })}
                        </List>
                    </Scrollbars>
                    <Title className="col-12 row-2 p_abs left bottom TotalCost paid">Total Cost: {locale.formatCurrency(CartStore.cartCost)}</Title>
                </div>
                <span className="col-12 row-2 p_abs left bottom btnplace">
                    <button onClick={this.checkout}>Print Receipt</button>
                    <Button label="Check Out" className="col-12 row-12 button next" onTouchTap={this.checkout} type="submit"/>
                </span>
            </aside>
        )
    }

[mcraiganthony]

@bellostom Do you see the same issue if you don't use the Scrollbars component?

Just FYI, Chrome has some serious issues with disappearing scroll bars. It doesn't matter if you are using this component or the native browser scrolling ... Chrome is jacked. I've had success wrapping content (the content that isn't showing a scroll bar) in a div set to overflow: hidden. This might not have anything to do with you specific issue but thought it worth mentioning.

[bellostom]

Hi, with the native scrollbars I see no issue

[dreamershl]

encounter this issue too. The reason is the latest chrome (Version 63.0.3239.108 (Official Build) (64-bit)) return the 0 as the (offsetWidth-clientWidth). In this case, suggest

1. provide the default value as scrollbar width (logically the scrollbar width should not be 0 at all)
2. provide a default scrollbar width property for caller to specify the value

[dreamershl]

after add this default scrollbar width, it works properly in chrome Version 63.0.3239.108

[gorjuspixels]

I can confirm that it's an issue. At least when using Chrome un macOS. I've been using this fork though https://www.npmjs.com/package/react-custom-scrollbars-patched.

[ozcanovunc]

If I use the following setting, scrollbar width cannot be calculated.

I had to use @dreamershl 's fork on my project.

Are you considering to merge his PR?