Overflow-Y Scroll Always Show Even It Not Overflow

overflow-y scroll always show even it not overflow

Try using overflow: auto instead. That will only show scrollbars when the content overflows the normal height, whereas overflow: scroll will show them all the time.

Overflow-y: Scroll not showing scrollbar

This issue has been already discussed on stackoverflow, you should need to remove the default style and use WebKit's.

Have a look the attached link.

solution

css overflow scroll bar appears even when there is nothing to scroll

I think you are looking for overflow: auto.

Mozilla's Documentation on Overflow

The overflow CSS property is shorthand for the overflow-x and overflow-y properties, and specifies what to do when content is too large to fit in its block formatting context.

The options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area.

auto

Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.

Overflow-y: Scroll not showing scrollbar in Chrome

According to CSS - Overflow: Scroll; - Always show vertical scroll bar?: OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.

CSS fix:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

CSS hide scroll bar if not needed

Set overflow-y property to auto, or remove the property altogether if it is not inherited.

Scrollbar Not Showing in Chrome With Overflow-y: scroll

I think you have to declare a height. Here's an example of what I'm using.

div {
    width: 30vw;
    height: 49.75vw;
    min-height: 1em;
    overflow-y: visible;
    overflow-x: hidden;
    direction: ltr;
    /*position of scroll bar can use rtl if wanted, but use div * {direction: ltr;} if you do.} */
    scrollbar-width: thin;/*fancy width*/
    scrollbar-color: #f3f0dd #154734;/*fancy colors for Firefox*/
}

div::-webkit-scrollbar {
  width: 11px;
}

div::-webkit-scrollbar-track {
  background: #154734;
}

div::-webkit-scrollbar-thumb {
  background-color: #f3f0dd;
  border-radius: 6px;
  border: 3px solid #154734;
}

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’
becomes ‘auto’ also when combined with
‘hidden’ (in other words: ‘visible’
becomes ‘auto’ when combined with
anything else different from
‘visible’). Gecko 1.8, Safari 3, Opera
9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’
and ‘overflow-y’ are the same as their
specified values, except that some
combinations with ‘visible’ are not
possible: if one is specified as
‘visible’ and the other is ‘scroll’ or
‘auto’, then ‘visible’ is set to
‘auto’. The computed value of
‘overflow’ is equal to the computed
value of ‘overflow-x’ if ‘overflow-y’
is the same; otherwise it is the pair
of computed values of ‘overflow-x’ and
‘overflow-y’.

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

---

Related Topics