jquery - 表的父级隐藏了溢出，这会切断我的悬停菜单

Question

我正在使用 jQuery DataTables 插件。我有一个位于流体宽度 div 内的表格。我想做的是，一旦页面不再允许表格为全宽，该表格就能够水平滚动。

我尝试使用 DataTables 水平滚动示例 ( http://datatables.net/examples/basic_init/scroll_x.html ) - 但我发现它有问题并且无法正常工作(例如，我发现 TH 与 TD 不匹配)。我发现很多人在论坛上都有同样的问题，并且有人建议在表中添加父 div 并使用:

.parent { overflow-x: auto; overflow-y: hidden; }

这个效果非常好!我现在遇到的问题是，在我的表格内有一个小工具提示菜单，由于隐藏的溢出而被切断。

您可以在此处查看演示: http://jsfiddle.net/eMvf9/

您会看到底部的翻转现在被切断了。但是，如果我从 .parent 中删除 overflow-y:hidden ，那么它就会在 Y 轴上获得滚动条。

有办法解决这个问题吗？是否必须是在 .s-roll 上具有位置固定的 jQuery？

Answer 1

您可以在最后一个 trs 最后一个 td 悬停时从父项中删除溢出-y。

 $('tr:last td:last').hover(function(){
  $('.parent').css('overflow-y', 'auto');    
},function(){
  $('.parent').css('overflow-y', 'hidden');
});

<强> Demo

您还可以使用以下方法更改最后一个元素菜单的顶部悬停选项:

 $('tr:last td:last .s-rollover').css('top', '-90px');