如何在特定元素上滚动，而不是整个页面？

Question

在特定控件跨越屏幕宽度并创建水平滚动条之前，我遇到过问题。只需将控件封装在 <div style="overflow:auto;"> 中即可修复它，以便仅滚动该 div 的内容。

这是我得到的：

整个页面都有一个水平滚动条，因此如果您滚动查看所有网格的内容，您将无法再看到上面表格中的搜索参数。

截图中包含网格的表格是这样创建的：

<div id="divPageControls" style="padding-right:0px; padding-bottom:15px">

<!-- the table(s) for the 'top half' of the application -->

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="clsBorderColor" style="LEFT:10px; POSITION:relative; TOP:10px;">
    <tr>
        <td height="5px">
        </td>
    </tr>
    <tr>
        <td valign="top" align="center">
        <div style="overflow:auto;width:100%;">
            <asp:datagrid id="dgAuditlog" runat="server" HeaderStyle-CssClass="clsGridHeaderText" ItemStyle-CssClass="clsGridCellText" PageSize="10" bodyHeight="220px" width="98%" CssClass="tblScroll">
                <Columns>
                    <asp:TemplateColumn HeaderText="Select" ItemStyle-HorizontalAlign="Center" HeaderStyle-CssClass="clsGridHeaderText" ItemStyle-Wrap="False" HeaderStyle-Wrap="False">
                        <ItemTemplate>
                            <input type="checkbox" tabindex="-1" />
                        </ItemTemplate>
                    </asp:TemplateColumn>
                </Columns>
            </asp:datagrid>
        </div>
        </td>
    </tr>
    <tr>
        <td height="5px"></td>
    </tr>
</table>
</div>

我尝试移动 div 以仅包含网格，仅包含 td、tr、整个 table。这要么没有任何区别，要么给了我一些可能更不可用的东西：

滚动条剪辑了网格，现在也有一个垂直的，而不是“下拉”来填充页面。

任何人对我可以做些什么来使包含此表的块具有水平滚动条而不是垂直“收缩”有任何想法吗？

编辑这是另一个网格的屏幕截图，在弹出窗口中，只有网格滚动：

在这种情况下，它垂直滚动，而不是水平滚动。但最终我的实际问题中的这个网格应该表现相同；只有特定的元素应该滚动，而不是整个页面。

Answer 1

好的，再次编辑：

<table style="width: 100%; table-layout: fixed;">
  <tr>
    <td>
      <div style="width: 100%; overflow: auto; background-color: #00F; height: 100px">
        Grid here ...
      </div>
    </td>
  </tr>
</table>

参见此处：How to stop table from resizing when contents grow?

Answer 2

你真的搞砸了你的问题..但我的理解是你想要一个不滚动的身体部分和一个滚动的 div。如果 div id 是#divPageControls。

您可以使用以下 css 属性：

       #divPageControls
        {
        overflow-x:auto;//If you want it to scroll Horizontally
        overflow-y:auto;//If you want it to scroll Vertically
        }
        body
        {
        overflow:hidden;
         } //Which will make body overflow hidden both horizontal and  vertical

希望它会有所帮助:)