边界半径滚动条

Question

我有两个滚动条，我用

为它设置了边框半径

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

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

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

我已经分配了Div的每个唯一ID和两个类：＃Scroll1＆amp; ＃Scroll2＆amp; .Overflow

我的问题是溢出是滚动我的数据表，但两个表都在一个大的div中，我想将边界半径与主div匹配。

这是一个例子：

我稍后会更好地定位它，但我想要的是放弃它的底部滚动条 border-top-right-radius和顶部滚动条可以删除border-bottom-right-radius

欢迎任何帮助。

这里应该是一个友好的JSfiddle有同样的问题： http://jsfiddle.net/z98Kq/

Answer 1

如果顶部滚动条包含id #Scroll1和底部#Scroll2，只需使用：

#Scroll1{
   border-bottom-right-radius:0;
}
#Scroll2{
   border-top-right-radius:0;
}

如果条形码没有id这样的属性，您可以使用nth-of-type或nth-child（或他们的first-和last-派生词）来定位第一个（顶部）和最后一个（底部）滚动条。

鉴于你提供HERE小提琴，你应该使用：

#canceltable::-webkit-scrollbar-thumb,#canceltable::-webkit-scrollbar-track{
   border-bottom-right-radius:0;
}
#Deletetable::-webkit-scrollbar-thumb,#Deletetable::-webkit-scrollbar-track{
   border-top-right-radius:0;
}

Demo