Show/hide scrollbar in react component

Question

Hello everyone) The question arose: how to properly organize the display scrollbar, when changing the height (more precisely, the amount of content that is present in the component).

const PathItems = () => {
    const divStyle = {
        overflowY: 'scroll',
        height: '85vh'
    };
...
return (
            <React.Fragment>
                <Row>
                    <Col className="pl-0 border-right border-dark" style={divStyle}>
                        <InputGroup className="mb-3">
                            <FormControl
                                type="text"
                                placeholder="Type..."
                                aria-describedby="basic-addon2"
                                value={ searchQuery }
                                onChange={ inputEvent }
                            />
                            <InputGroup.Append>
                                <Button variant="outline-secondary">
                                    <img
                                        alt="Logo"
                                        src="https://cdn1.iconfinder.com/data/icons/app-user-interface-line/64/search_focus_user_interface_app_zoom-256.png"
                                        width="25"
                                        height="25"
                                        className="d-inline-block align-top"/>
                                </Button>
                            </InputGroup.Append>
                        </InputGroup>
                        {filterItems.sort((a, b) => b.favorite - a.favorite).map(item => (
                            <PathItem
                                key={item.id}
                                item={item}
                                onInfoChange={ handleClick }
                            />
                        ))}
                    </Col>
                    <Col style={divStyle}>
                        <FullDecript />
                    </Col>
                </Row>
            </React.Fragment>
        )

The main problem is to construct the display scrollbar condition (which is shown in the photo).

Answer 1

I'm not sure if this helps but you can use overflow: 'overlay' in your CSS Properties for the scrolling component. This makes the scroll bars not affect your content width and you can adjust your margins accordingly.

You can also use the the property overflow: 'auto' which will show your scrollbars only when the content inside the container is overflowing.