在DScrollPane中悬停时将DIV向前移动

Question

我在jScrollPane（http://jscrollpane.kelvinluck.com）中有一个表。在桌子上我有一个图像，所以当用户盘旋它时会显示一个文本气泡。

这很好但问题是当我将鼠标悬停在图像上时，气泡会被切断。我需要做的是当它徘徊以完全带来泡沫而不会隐藏或切断jspContainer

虽然我尝试为z-index设置更高的.bubble值，但它似乎无法正常工作。

但是当我增加jspContainer的容器高度时，气泡是完全可见的，但我需要在不增加高度的情况下将其向前移动

我在这里制作了一个示例小提琴http://jsfiddle.net/livewirerules/x9dcgthp/3/

任何帮助将不胜感激

Answer 1

我建议您丢失jScrollPane并处理默认的滚动条。 jScrollPane可以删除滚动条并将其替换为自己的唯一方法是将容器设置为overflow: hidden;并手动处理滚动事件，这意味着超出该容器的任何内容都将被剪掉。如果强制容器出现可见的溢出，jScrollPane将停止工作。

然而，您有一些解决方法，但我不建议所有这些。

• 您可以将工具提示放在jscrollpane容器之外，但是您必须在滚动时手动移动它并相应地定位它会导致更多的开销和页面无响应。
• 您可以在jscrollpane外部拥有一个tooptip对象，您可以在点击/悬停图标时激活/停用该对象。这将再次导致更多的开销和不可维护的代码。
• 您可以增加jScrollPane的高度，然后为其添加填充并将工具提示移动到中心而不是低于图标。但是，这可能仍会有溢出的内容。
• 您可以在悬停/点击时覆盖数据行，而不是在图标下方显示工具提示。这种方式完全可见，但它违反了正确的UI / UX原则。
• 您可以创建自己的自定义jScrollPane实现，该实现允许出血内容。这会使您的工作量翻倍，但仍会导致性能下降。

最后，失去jScrollPane仍然是最好的选择，因为内置滚动条没有定义你想要的整体设计方向。此外，一些现代浏览器已经隐藏了滚动条，并且当​​它出现在可滚动容器上时，用更好的元素替换它们。

Answer 2

你遇到的jspcontainer高度的第一个问题不是因为z-index而是因为你在渲染数据表时调用$('.scroll-pane').jScrollPane();导致javascript设置jScrollPane的高度仅在该时间内呈现的1或2行。

您需要在$(document).ready()函数中添加调用，以便在呈现与页面相关的所有元素之后初始化窗格。或者在页面末尾添加此调用。

$( document ).ready(function()
{
    $('.scroll-pane').jScrollPane();
});

现在我认为你可以解决css问题，以便根据需要设置气泡对齐设置。 ：）

这里有一些你的修改后的代码，我已经做了一些调整。 http://codepen.io/Nasir_T/pen/RGdrbB

希望这有帮助。