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>

Answer 2

如果发生这种情况，您将无法使其正常运行！

然后知道您需要提供基本样式。在这里https://stackoverflow.com/a/54973078/7668448

检查我的答案

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

2 个答案: