带圆角和内部滚动条的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)，情况会很糟糕。

看看这个 stackoverflow 问题。