CODEWITHSUNDEEP
htmlcss
user2014429
user2014429

Reputation: 2567

put scroll bar outside div with auto overflow

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>

Upvotes: 46

Views: 105312

Answers (3)

Holiday
Holiday

Reputation: 891

You can also use a combination of padding right and setting the width to 100% + 10px. Works like a charm.

.alphabet {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid;
  border-bottom: 0;
  // for outside scrollbar
  width: calc(100% + 10px);
  overflow-y: auto;
  padding-right: 10px;
}

Upvotes: 2

Fico
Fico

Reputation: 2407

Instead of using and outside-scrollbar, why not to use some right padding as so

   .alphabet{ display:inline-block;
               overflow-y:auto; 
               overflow-x:hidden;
               border:1px solid;
               height:50;
               padding-right:15px;
             }

Or if you prefer, using em units to match a character whatever size you are using

padding-right:1em;

PD: By the way there is a typo in your example. The period should be previous it should be .alphabet {

Upvotes: 1

Lily
Lily

Reputation: 352

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/).

Upvotes: 20

Related Questions