带圆角和内部滚动条的DIV

Question

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

由于滚动条，右手角变为方形。

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

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

Answer 1

您可以使用border-radius滚动条（scrollbar-track）周围的容器（scrollbar-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）它会很糟糕。

查看this stackoverflow question。