increase size of scrollbar react-custom-scrollbar

Question

I am using the react-scrollbar library which contains demos here.

I am trying to figure out how to increase the size of the scrollbar but am having difficulties

import React, { Component } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';

export default class App extends Component {
    render() {
        return (
            <Scrollbars
                style={{ width: 300 }}>
                <p>Lorem ipsum dolor justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <p>Lorem consetetur</p>
                <p>Lorem ipsum anctus est Lorem ipsum dolor sit amet.</p>
            </Scrollbars>
        );
    }
}

width here changes the width of the actually div and not the scrollbar.

Does anyone know how to increase the width of the actual scrollbar?

peter flanagan · Accepted Answer · 2017-05-02 11:46:55Z

2

You need to use renderThumbVertical

<Scrollbars
    renderThumbVertical={({ style, ...props }) =>
        <div {...props} style={{ ...style, width: '60px' }}/>
}>

 <p>Content</p>

</Scrollbars>

answered May 2, 2017 at 11:46

peter flanagan

9,89027 gold badges84 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed Allal · Accepted Answer · 2019-03-03 19:57:30Z

0

If it happen that you couldn't make it work !

Then know that you need to provide the base styling. Check my answer here https://stackoverflow.com/a/54973078/7668448

answered Mar 3, 2019 at 19:57

Mohamed Allal

21.4k6 gold badges107 silver badges110 bronze badges

Collectives™ on Stack Overflow

increase size of scrollbar react-custom-scrollbar

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related