html - 带圆角和内部滚动条的 DIV

Question

我正在尝试实现 DIV 具有内部滚动条和圆角的场景。我的第一次尝试导致了这个：

由于滚动条，右边的角落变成了方形。

接下来，我添加了一个带有一些顶部和底部填充的内部 div，以便向下推动滚动条并保持计数的条数。结果是这样的：

我想要一个混合，其中滚动条是 div 的全长，但不要使角落变成正方形。这可能吗？

Answer 1

您可以使用滚动条 ( )border-radius的周围容器 ( )。scrollbar-trackscrollbar-thumb

例子：

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

jsfiddle：http: //jsfiddle.net/p2bWf/

来源：http ://css-tricks.com/custom-scrollbars-in-webkit/

Answer 2

您应该尝试自定义滚动条。在您的屏幕截图上，您使用的是 OS X 系统，但使用 IE (Windows) 会很糟糕。

看看这个 stackoverflow 问题。