将滚动条放在具有自动溢出的div外面

Question

我有一个带有overflow:auto;的小div，但当滚动条出现时，它会覆盖大部分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

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

---

注意：此解决方案会破坏浏览器水平滚动的快捷键（shift + 鼠标滚轮）功能。已在Chrome 78上进行测试。 - Boy

Answer 2

不要使用外部滚动条，为什么不使用右填充？

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

或者，如果您喜欢，可以使用em单位来匹配任何大小的字符

padding-right:1em;

顺便提一下，你的示例中有一个错别字。句号应该在前面，应该是.alphabet {

- Fico

---

但是如果滚动条没有显示，填充应该为0（或小于15）。 - Cromax

但是在Chrome中，即使它被放置在div外部，它仍然占据div内部的空间。 - Ahmad Maleki

Answer 3

你还可以使用右边填充和将宽度设置为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