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>

Answers


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.


Need Your Help

Meteor cannot update mongo?

javascript jquery mongodb meteor

I'm having a strange problem were the below line of code will not run in my JavaScript, however runs fine in the -meteor mongo terminal

Genemu jquery select2 Could not load type “genemu_jqueryselect2_religion”

jquery forms symfony2 types

I have a symfony 2.6 project and I've recently installed Genemu jquery select2 from their form bundle, Which says that we need to suffix every type with the name of the form field, But I keep getting

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.