隐藏父 div 溢出时滚动不起作用

Question

我在用一个特定的 div 设置滚动时遇到问题。我需要说我已将overflow:hidden 设置为body 标签。

<div class='scrollable'> 中有两个控件（asp:Table 和 asp:Panel）。 asp:Table 是可滚动的，即使正文溢出被隐藏，但 asp:Panel 不是（与 asp:Table 中的操作相同）。

代码如下：

<div class="content">
        <div class="scrollable">
            <asp:Table ID="TasksTable" runat="server" CssClass="container">

            THERE ARE SIMPLE TABLE TAGS without any mention to overflow

            </asp:Table>
            <asp:Panel ID="TaskDetail" CssClass="taskDetail" runat="server">
                  <div class='detailDiv'>
                      There are <hX> and <p> tags, nothing special
                  </div>
            </asp:Panel>
        </div>
 </div>

CSS：

body {
    background-color: #e8b03a;
    overflow:hidden;
}

.content {
    position: absolute;
    height: 100%;
    margin: 0 auto;
    overflow:hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.scrollable {
    height: 100%;
    overflow-y: scroll;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    width: 99%;
}

.container tr {
    text-align: center;

}

.container th {
    height: 25px;
    background-color: #73697f;
    border: 1px white;
}
.taskDetail {
    /* display: none; */
    overflow:auto;
}

我无法让TasksDetails 可滚动。例如，TasksTable 中有 30 个表行。每个都有click 函数，它使其他行隐藏并且它使scrollable 不可滚动（它的切换类noScroll { overflow:hidden; }）。

类似于表格行详细信息：我点击表格行，.taskDetail 出现在选定表格行下方（默认为display:none）。

如何使.taskDetail 或detailDiv 可滚动？

Answer 1

只需 addClass() .scrollable 到 div 或应用下一个 css() 方法

$(".taskDetail").css("overflow-y", "scroll")

$(".detailDiv").addClass("scrollable")

body {
    background-color: #e8b03a;
    overflow:hidden;
}

.content {
    position: absolute;
    height: 100%;
    margin: 0 auto;
    overflow:hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.scrollable {
    height: 100%;
    overflow-y: scroll;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    width: 99%;
}

.container tr {
    text-align: center;

}

.container th {
    height: 25px;
    background-color: #73697f;
    border: 1px white;
}
.taskDetail {
    /* display: none; */
    overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
        <div class="scrollable">
            <asp:Table ID="TasksTable" runat="server" CssClass="container">

            THERE ARE SIMPLE TABLE TAGS without any mention to overflow

            </asp:Table>
            <asp:Panel ID="TaskDetail" CssClass="taskDetail" runat="server">
                  <div class='detailDiv'>
                      There are and <p> tags, nothing special
                  </div>
            </asp:Panel>
        </div>
 </div>