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

Question

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

asp:Table 中有两个控件( asp:Panel 和 <div class='scrollable'> ) 。 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>