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()。可滚动到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>

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

1 个答案: