使用CSS将Border-Radius应用于滚动条 [英] Apply Border-Radius To Scrollbars with CSS

问题描述

简单来说，这就是我想要的(使用 -webkit-scrollbar 在Webkit浏览器上获得):

To put it simple, this is what i want (obtained on a Webkit Browser using -webkit-scrollbar) :

这就是我在Opera上获得的(Firefox也不会将边框半径应用于滚动条，但仍会应用边框):

And this is what I get on Opera (Firefox doesn't apply the border radius to the scrollbar either, but still applies the border) :

是否有一种简单的方法可以使边框在滚动条下不消失?

我不需要 -webkit-scrollbar 的精美样式，但我希望页面看上去干净且对称...

I dont need the fancy style of -webkit-scrollbar but i would like the page to look clean and symmetric...

推荐答案

我遇到了同样的问题.这不是最优雅的解决方案，而是只需在外部框内放入一个较小的div，以使滚动条不会与外部框重叠.

I've been having the same issue. It's not the most elegant of solutions but, simply put a smaller div inside your outer box so the scroll bar doesn't overlap the outer box.

就像从这支笔:

.box {
  height: 200px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid #666;
  padding: 6px 0px;
  background: #ccc;
}

.box-content {
  height: 200px;
  width: 250px;
  overflow: auto;
  border-radius: 8px;
}

<div class="box">
  <div class="box-content">
    <ol>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
</div>

这篇关于使用CSS将Border-Radius应用于滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！