CSS-Only Solution for Overflow/Scroll Indicators

CSS-only solution for overflow/scroll indicators

This did the trick for me:

• change width: 2rem; to min-width: 2rem;
• add max-width: 2rem; on .scrollbox::before

I have only looked at it on Chrome (macOS and Andriod).

html {  background: #FFF;}
.scrollbox ul {  white-space: nowrap;  -webkit-box-flex: 1;  -webkit-flex: 1 0 auto;      -ms-flex: 1 0 auto;          flex: 1 0 auto;  margin-left: -4rem;  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  list-style-type: none;}
.scrollbox {  outline: 1px dotted black;  position: relative;  z-index: 1;  overflow-x: auto;  overflow-y: hidden;  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: start;  -webkit-justify-content: flex-start;      -ms-flex-pack: start;          justify-content: flex-start;  -webkit-overflow-scrolling: touch;  -ms-overflow-style: -ms-autohiding-scrollbar;  -webkit-flex-wrap: nowrap;      -ms-flex-wrap: nowrap;          flex-wrap: nowrap;  word-wrap: nowrap;  max-width: 200px;  margin: 50px auto;  background: #FFF no-repeat;  background-image:    -webkit-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),    -webkit-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));  background-image:    -o-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)),    -o-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));  background-image:    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)),    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0));  background-position: 0 0, 100% 0;  background-size: 1rem 100%;}
.scrollbox::before,.scrollbox::after {  content: '';    position: relative;    z-index: -1;    display: block;    min-width: 2rem;    margin: 0;    -webkit-box-flex: 1;    -webkit-flex: 1 0 auto;        -ms-flex: 1 0 auto;            flex: 1 0 auto;}
.scrollbox::before {  max-width: 2rem;  background: -webkit-gradient(linear,left top, right top,from(#FFF),color-stop(50%, #FFF),to(rgba(255,255,255,0)));  background: -webkit-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));  background: -o-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0));  background: linear-gradient(to right,#FFF,#FFF 50%,rgba(255,255,255,0));}
.scrollbox::after {  background: -webkit-gradient(linear,left top, right top,from(rgba(255,255,255,0)),color-stop(50%, #FFF),to(#FFF));  background: -webkit-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);  background: -o-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF);  background: linear-gradient(to right,rgba(255,255,255,0),#FFF 50%,#FFF);}

<div class="scrollbox">  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>  </ul></div>

<div class="scrollbox">  <ul>    <li>Ah! Scroll right!</li>    <li>2 Lorem Ipsum</li>    <li>3 Lorem Ipsum</li>    <li>4 Lorem Ipsum</li>    <li>5 Lorem Ipsum</li>    <li>6 Lorem Ipsum</li>    <li>7 Lorem Ipsum</li>    <li>8 Lorem Ipsum</li>    <li>9 Lorem Ipsum</li>    <li>1 Lorem Ipsum0</li>    <li>1 Lorem Ipsum</li>    <li>2 Lorem Ipsum</li>    <li>3 Lorem Ipsum</li>    <li>4 Lorem Ipsum</li>    <li>5 Lorem Ipsum</li>    <li>6 Lorem Ipsum</li>    <li>7 Lorem Ipsum</li>    <li>8 Lorem Ipsum</li>    <li>9 Lorem Ipsum</li>    <li>1 Lorem Ipsum0</li>    <li>1 Lorem Ipsum</li>    <li>2 Lorem Ipsum</li>    <li>3 Lorem Ipsum</li>    <li>4 Lorem Ipsum</li>    <li>5 Lorem Ipsum</li>    <li>6 Lorem Ipsum</li>    <li>7 Lorem Ipsum</li>    <li>8 Lorem Ipsum</li>    <li>The end!</li>    <li>No shadow there.</li>  </ul></div>

How do I make the scrollbar on a div only visible when necessary?

Use overflow: auto. Scrollbars will only appear when needed.

(Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto).

Making a div vertically scrollable using CSS

You have it covered aside from using the wrong property. The scrollbar can be triggered with any property overflow, overflow-x, or overflow-y and each can be set to any of visible, hidden, scroll, auto, or inherit. You are currently looking at these two:

• auto - This value will look at the width and height of the box. If they are defined, it won't let the box expand past those boundaries. Instead (if the content exceeds those boundaries), it will create a scrollbar for either boundary (or both) that exceeds its length.

• scroll - This values forces a scrollbar, no matter what, even if the content does not exceed the boundary set. If the content doesn't need to be scrolled, the bar will appear as "disabled" or non-interactive.

If you always want the vertical scrollbar to appear:

You should use overflow-y: scroll. This forces a scrollbar to appear for the vertical axis whether or not it is needed. If you can't actually scroll the context, it will appear as a"disabled" scrollbar.

If you only want a scrollbar to appear if you can scroll the box:

Just use overflow: auto. Since your content by default just breaks to the next line when it cannot fit on the current line, a horizontal scrollbar won't be created (unless it's on an element that has word-wrapping disabled). For the vertical bar,it will allow the content to expand up to the height you have specified. If it exceeds that height, it will show a vertical scrollbar to view the rest of the content, but will not show a scrollbar if it does not exceed the height.

CSS hide scroll bar if not needed

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

Hide scroll bar, but while still being able to scroll

Just a test which is working fine.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

Using Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

How do I enable scrolling only in one direction in CSS?

The problem is that overflow-x: visible; overflow-y: scroll is an impossible combination in CSS. Whenever visible is paired with scroll, it is converted to auto.

In other words, these are equivalent:

overflow-x: visible;
overflow-y: scroll;

overflow-x: auto;
overflow-y: scroll;

Perhaps it was a poor decision for the spec, but there are work-arounds.

By making the expanding elements position: absolute, their size will not change the container, and they will not be clipped by overflow: hidden. To get them positioned correctly, an extra div with position: relative is wrapped around the whole container.

HTML:

<div class='container1'>
  <div class='container2'>
    <ul class='messages'>
      <li><pre>Hello</pre></li>
      <li>
        <pre>This is a 
      really really really 
      really really long message.</pre>
      </li>
      <li><pre>World</pre></li>
    </ul>
  </div>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
}

.container1 {
  position: relative; 
  width: 200px;
}

.container2 {
  background: #f0f;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.messages {
  overflow: visible;
  list-style: none;
}

.messages li {
  background: #ff0;
  width: 100%;
  height: 24px;
  margin-top: 12px;
}

.messages li pre {
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  max-height: 24px;
  padding: 4px;
  background: #0ff;
  border-radius: 4px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: auto;
  min-width: 100%;
  max-width: 100%;
  transition: max-width 200ms ease-out, height 200ms ease-out;
}

.messages li pre:hover {
  z-index: 1;
  background: #00f;
  max-width: 80vw;
  max-height: 80vh;
  transition: max-width 200ms ease-in, max-height 200ms ease-in;
}

Fiddle: https://jsfiddle.net/cyL6tc2k/2/

Credit to the trick found here: http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent

Scrollbar not scrolling completely down the page

not sure what the possible cause was. But just putting an extra div below the regular div solved the issue. Now i can view all the items in the above div. Please see the question itself for the answer.
Might help someone in case they want to have a workaround like this.

Disable Scrolling on Body

Set height and overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

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