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).

M. G. · Accepted Answer · 2020-08-11 22:13:55Z

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.

answered Aug 11, 2020 at 22:13

M. G.

5912 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Show/hide scrollbar in react component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related