put scroll bar outside div with auto overflow

Question

I have a small div with overflow:auto; but when the the scroll bar appears it covers up a great deal of the div. This can be avoided by using overflow:scroll;, but then you get the unsightly faded scroll bar when there is no overflow. Is there a way of putting the scroll bar outside of the div without using overflow:scroll;? Thanks.

here is a demonstration jsfiddle

.alphabet{ display:inline-block;            overflow-y:auto;             overflow-x:hidden;            border:1px solid;            height:50;          }  <div class = "alphabet">abcdefgh<br>                         ijklmnop<br>                         qrstuvwx </div> 

Answer 1

If it's an option to use a container element around .alphabet, you can set the vertical scroll on that. I've added the <hr> to fake an always-visible bottom border that won't also go under the scrollbar.

HTML:

<div class="container">     <div class="alphabet">         abcdefgh<br />         abcdefgh<br />         abcdefgh<br />         abcdefgh<br />     </div> </div> <hr> 

CSS:

.container{     overflow-y:auto;      overflow-x:hidden;      height:50px;     width:100px; }  .alphabet{               width:100%;     overflow:visible;     box-sizing:border-box;     border:1px solid;     border-bottom:0; }  hr{     margin:0;     height:0;     width:85px;     border:0;     border-bottom:1px solid; } 

With inner border: http://jsfiddle.net/Q32gG/1/

If you don't actually care about the scrollbar showing inside the border, you can drop the <hr> and add a full border to .container instead (http://jsfiddle.net/V3MbV/3/).