将滚动条放在 div 之外并自动溢出

Question

我有一个小的 div overflow:auto; 但是当滚动条出现时它覆盖了大量的 div。这可以通过使用 overflow:scroll; 来避免，但是当没有溢出时你会得到难看的褪色滚动条。有没有办法在不使用 overflow:scroll; 的情况下将滚动条放在 div 之外？谢谢。

这是一个演示 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>

原文由 user2014429 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果可以选择在 .alphabet 周围使用容器元素，则可以在其上设置垂直滚动。我添加了 <hr> 来伪造一个始终可见的底部边框，该边框也不会位于滚动条下方。

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;
}

带内边框：http: //jsfiddle.net/Q32gG/1/

如果您实际上并不关心边框内显示的滚动条，则可以删除 <hr> 并向 .container 添加一个完整边框（ http://jsfiddle.net/V3MbV /3/ ）。

原文由 Lily 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您还可以结合使用 padding right 和将宽度设置为 100% + 10px。奇迹般有效。

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

原文由 Holiday 发布，翻译遵循 CC BY-SA 4.0 许可协议