我搜索了一个示例,了解如何使用nanoScroller使表的主体可滚动。唯一的解决方案是使用div并且工作正常。
现在我想在这个单元格中添加一个菜单,它应该与表角的主体重叠,如下所示: wanted result
但目前它看起来像这样:
$('.nano').nanoScroller();
* {
box-sizing: border-box;
}
body {
background: #111;
margin: 0;
font-family: sans-serif;
font-size: 120%;
}
.wrapper {
margin: auto;
max-width: 400px;
width: 80%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.c-table {
display: flex;
flex-direction: column;
width: 100%;
background: #fff;
border-radius: 5px;
overflow: hidden;
height: 220px !important;
}
.c-table__header {
display: block;
width: 100%;
}
.c-table__row {
display: table;
width: 100%;
}
.c-table__cell {
display: table-cell;
padding: 10px;
text-align: left;
}
.c-table__cell--th {
background: hsl(200, 40%, 60%);
color: #333;
}
.c-table__cell:first-child {
width: 40%;
}
.c-table__cell:nth-child(n+2) {
width: 30%;
text-align: right;
}
.c-table__body {
overflow-y: auto;
}
#mydiv {
position: relative;
}
#mydiv > div {
position: absolute;
height: 100px;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/css/nanoscroller.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/javascripts/jquery.nanoscroller.min.js"></script>
<div class="wrapper">
<div class="c-table">
<div class="c-table__header">
<div class="c-table__row c-table__row--header">
<div class="c-table__cell c-table__cell--th">Type</div>
<div class="c-table__cell c-table__cell--th">2014</div>
<div class="c-table__cell c-table__cell--th">2015</div>
</div>
</div>
<div class="nano has-scrollbar">
<div class="nano-content" tabindex="0" style="right: -17px;">
<div class="c-table__body">
<div class="c-table__row">
<div class="c-table__cell">Apples</div>
<div class="c-table__cell">15</div>
<div class="c-table__cell">12</div>
</div>
<div class="c-table__row">
<div class="c-table__cell">Oranges</div>
<div class="c-table__cell">15</div>
<div class="c-table__cell">12</div>
</div>
<div class="c-table__row">
<div class="c-table__cell">Lettuce</div>
<div class="c-table__cell">18</div>
<div class="c-table__cell">12</div>
</div>
<div class="c-table__row">
<div class="c-table__cell">Plums</div>
<div class="c-table__cell">13</div>
<div class="c-table__cell">18</div>
</div>
<div class="c-table__row">
<div class="c-table__cell">Cherries</div>
<div class="c-table__cell">12</div>
<div class="c-table__cell">15</div>
</div>
<div class="c-table__row">
<div class="c-table__cell">Lemons</div>
<div class="c-table__cell">12</div>
<div class="c-table__cell">
<div id="mydiv">
<div>hello</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我做错了什么?