Jquery 隐藏溢出的绝对定位div

我在页面上放置了一个div，其中包含

style=“z-index:1；position:absolute；”

此div的（x，y）位置是使用

$(onMouse).css('left',(mouseX - offSetX) + "px");
$(onMouse).css('top',(fixY) +"px");

动态的，这件作品很好。（但我认为这可能是相关的）

在该div中，我放置了一个由两行组成的表。第一行是带有一个单元格的表。第二行由一个新的div组成，我设置了它的样式

$(scrollDiv).css("overflow","hidden");
$(scrollDiv).css("position","relative");
$(scrollDiv).css("height","100px");

第二个div包含一个表，其中有大量的行。我希望它能在scrollDiv的高度上切掉这些行，但它不能这样做。它只显示存在的所有行。有人知道我做错了什么吗

编辑#1

感谢Tim Dodd和Dan的回复！为了更清楚，我将您创建和修改的JSFIDLE作为我的意思的通用版本。你可以在这里找到它：

---

我希望在单击时创建的表显示与原始表相同的行。我认为您可以通过设置

溢出

和

高度

属性来实现这一点，就像我使用

.pieceOfTable

CSS类那样，但它不起作用。你知道我将如何做到这一点吗？

我已经做了一百万次了，这是我理解你问题的唯一原因。你需要这样做

<div id="TblWrapper">
 <div id= "TblHeader"><table><th>ColumnHeader</th></table></div>
<div id = "TblBody">
   <table>
   <tr><td>A</td></tr>
    <!-- more Rows-->
   </table>
</div>
</div>

请看一个例子。我在示例中添加了一些背景色，以便您可以看到整个过程是如何构建的

---

最美妙的部分是它的全部功能，没有任何笨重的JavaScript。在这种情况下，这会导致滚动出现起伏

设置溢出-y：滚动；在#TblBody或table上，将其设置为所需高度。

类似于定义一些--

用一点嵌套操作来切换溢出-y:？

首先

$(onMouse).css({
  left: (mouseX - offSetX) + "px",
  top: fixY +"px"
});

$(scrollDiv).css({
  overflow: 'hidden',
  position: 'relative',
  height: '100px'
});

除此之外，单击时显示的div没有高度值或溢出：隐藏。给它一个边框，这样用户就可以看到它被切断的位置/原因，这也可能是有意义的

#floater {  <-- based off of your fiddle. Update if needed.
  height: 200px;
  overflow-y: auto;
  border: 1px solid #000;
}

---

#浮球{你有一个我们可以看的JSFIDLE演示吗？刚刚更新了一个。当我写这篇文章时，我正在离开工作，所以没有机会。谢谢！谢谢！我不太明白为什么要将overflow-x设置为自动修复它的逻辑。看起来这一切都与overflow-y有关。你能再解释一下吗？如果不是，谢谢，我很感激！还有一件事要补充，是的，我没有给div加一个高度，但是我给了div加了一个高度，它在桌子里面，在div里面，所以我想那就足够了…我现在明白了，不是这样的。是的…那应该是overflow-y。我的疏忽。好的，太好了。我只是想我可以我错过了一些东西。再次感谢！
$(onMouse).css({
  left: (mouseX - offSetX) + "px",
  top: fixY +"px"
});

$(scrollDiv).css({
  overflow: 'hidden',
  position: 'relative',
  height: '100px'
});

#floater {  <-- based off of your fiddle. Update if needed.
  height: 200px;
  overflow-y: auto;
  border: 1px solid #000;
}