javascript - 增加滚动条的大小 react-custom-scrollbar

Question

我正在使用 the react-scrollbar图书馆contains demos here .

我想弄清楚如何增加滚动条的大小，但遇到了困难

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 此处更改的是实际 div 的宽度，而不是滚动条的宽度。

有谁知道如何增加实际滚动条的宽度？

Answer 1

你需要使用renderThumbVertical

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

 <p>Content</p>

</Scrollbars>