我在使用一个特定的 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
可滚动?
最佳答案
只需 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>
关于javascript - 隐藏父 div 溢出时滚动不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46190261/