如何在 div 内的数据网格右侧附加滚动条？答案

【问题标题】：How to attach a scrollbar to the right of a datagrid inside a div?如何在 div 内的数据网格右侧附加滚动条？
【发布时间】：2012-12-26 06:43:45
【问题描述】：

我正在创建一个可滚动的div，其中包含一个像这样的 Datagrid：-

<div id="myDiv"
     style="overflow: auto; height: 300px; "
     onscroll="myFunction();">
     <asp:DataGrid id="gradesGrid"
     .
     .
     .
     </asp:DataGrid>
</div>

并且滚动条正式出现。但不是像我希望的那样附加到div 内容的右侧，而是遮挡了DataGrid 的右侧边缘。这会导致出现烦人的水平滚动条。有什么方法可以说服div 将滚动条附加到 DataGrid 的外部而不是其顶部？

【问题讨论】：

标签： asp.net datagrid scrollbar

【解决方案1】：

据我所知，目前不支持。

如果您不介意 div 中垂直滚动条的轻微中断，只需应用以下内容：

overflow-x: hidden;

隐藏水平滚动条（上图），或增加 div 的大小 = 滚动条的像素宽度。也许实现一些填充？

padding-right: <value of the width of the scrollbar>;

编辑： *我建议填充的原因是因为你说你想要它在外面，现在你不能这样做，但如果它在外面，其他内容就必须这样做用边距或填充进行调整 - 所以真的没关系（这可能是你不能首先将滚动条设置在外面的原因）。

例如如果您在外面有滚动条，并且它是 10px 宽，那么您将需要在其他 div 或它旁边的任何东西上设置一条规则，以便在它的侧面有 10px 的边距，以“触及”该滚动条。在包含的元素上添加填充更容易。* 编辑结束。

你也可以设置滚动条的宽度，webkit上的例子：

::-webkit-scrollbar 
{
    width: 10px;
    height: 10px;
}

这是一个非常夸张的例子：http://jsfiddle.net/eFhnN/

【讨论】：

谢谢。 padding-right 选项是我选择的，而且效果很好。