CODEWITHSUNDEEP
htmlcss
user2014429
user2014429

Reputation: 2577

stop scroll bar from covering div content with auto overflow

I have this div with overflow-y:auto; which can be very narrow and when the scroll bar appears it can cover much or all of the div. I would like the scroll bar to appear outside the div like with overflow:scroll; but I don't want to see the faded scroll bar when there is no overflow. Also I don't want to give the div a width as the width must be variable. This jsfiddle demonstrates my issue, and here is the code:

   .auto {
            display:inline-block;
            border:1px solid green;
            height:70px; 
            overflow-y:auto; 
         }

<div class = "auto">
  <div>
    a<br>
    b<br>
    c<br>
    d<br>
  </div>
</div>

Upvotes: 10

Views: 15417

Answers (3)

Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

This could be a solution: http://jsfiddle.net/ZUYVe/5/

Basically, it uses a wrapper to contain the scrollbar

<div class="scroll">
  <div>a
    <br />b
    <br />c
    <br />d
    <br />
  </div>
</div>

and leaves some space on the right side for it:

padding-right: 13px;

However, since scrollbars may vary depending on OS, I'd suggest to use custom scrollbars like this jQuery plugin.

Upvotes: 4

DiederikEEn
DiederikEEn

Reputation: 743

fiddleadd a min-width to it and a max-width. this way it stays variable

Upvotes: 1

Kishan Patel
Kishan Patel

Reputation: 1408

Give 18px padding right to .auto class it will be help you. 

   .auto   {
       border:1px solid green;
       height:70px; 
       overflow-y:auto; 
       display:inline-block;
       padding-right:18px;
      }

Upvotes: 3

Related Questions