html - 停止滚动条覆盖自动溢出的 div 内容

Question

我有一个带 overflow-y:auto; 的 div，它可以非常窄，当滚动条出现时，它可以覆盖大部分或全部 div。我希望滚动条像 overflow:scroll; 一样出现在 div 之外，但我不想在没有溢出时看到褪色的滚动条。另外我不想给 div 一个宽度，因为宽度必须是可变的。这jsfiddle演示我的问题，这里是代码:

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

Answer 1

这可能是一个解决方案:http://jsfiddle.net/ZUYVe/5/

基本上，它使用包装器来包含滚动条

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

并在右边留一些空间给它:

padding-right: 13px;

但是，由于滚动条可能因操作系统而异，我建议使用自定义滚动条，如 this jQuery plugin .