Conditionally hide scrollbar in css?

Question

I know that most use overflow: auto in this scenario. However, my table width slightly exceeds the content within it (by design, various sections on the page have the same width).

Is there another way I can conditionally hide/show a scrollbar, dependent on the browser width in pixels, perhaps?

My issue is I have a scrollbar popping up too early. Look at this for example:

This is the end of the table, but the scrollbar unnecessarily pops up. This is mostly because of that extra whitespace outside the word "Disconnect". It is calculating the overflow property based on that entire cell. Ideally, I'd like to be able to hide the scrollbar until absolutely needed (e.g. the page becomes sufficiently small such that disconnect starts to get hidden).

If not using overflow: auto, do I have any other options here?

Adassko · Accepted Answer · 2021-04-12 17:50:43Z

2

You're probably trying to solve wrong issue - if the "scrollbar" pops up "unnecessarily" it means you have problem with padding/margin - you should inspect items and see what is overflowing the view - replacing padding with margin or adding box-sizing: border-box might help.

Other than than you can use media queries for your original question:

.element {
    overflow: visible;
}

@media (min-width: 900px) {
    .element {
        overflow: auto;
    }    
}

edited Apr 12, 2021 at 17:50

answered Apr 12, 2021 at 17:41

Adassko

5,36326 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

Conditionally hide scrollbar in css?

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