Show scroll only when it needs

Question

    ::-webkit-scrollbar {
      width: 5px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: var(--back-color);
      border-radius: 5px;
    }
    ::-webkit-scrollbar-track {
      background-color: var(--main-color);
      width: 5px;
    }

Here is how I specified the scroll properties.

What needs to change to display scroll only if it needs? Right now it always show scroll.

Check for `overflow: scroll`, which causes the scroll bar to become visible at all times. Also, just to make sure that the scroll bar appears only when it shouldn't, try using one of the solutions from [here](https://stackoverflow.com/q/31458477/). — Lakshya Raj, Aug 08 '21 at 15:08
`overflow: auto` is correct. with `scroll` it will always be there, with `auto` only when needed — The Fool, Aug 08 '21 at 15:08

score 1 · Accepted Answer · answered Aug 08 '21 at 15:32

Maybe it's because your element does have a length that exceeds the screen or you have overflow:scroll in your CSS.

overflow:scroll keeps the scrollbars always appear, while overflow:auto makes the scrollbars appear only when needed. Check this out:

.parent {overflow:scroll}

<div class='parent'>
Lorem ipsum
</div>

And this:

.parent {overflow:auto}

<div class='parent'>
Lorem ipsum
</div>

Show scroll only when it needs

1 Answers1