垂直滚动条内没有溢出的div -y：滚动

Question

我正在尝试为我的项目创建一个类似的“工具提示”。

的问题是，父容器具有“溢出-Y：滚动”适用于它（我需要有一个垂直滚动条），它只是夹及其子元素，当我尝试移动属性他们走出容器。有没有什么办法可以让我的垂直滚动条没有overflow-y？

这是我有什么，我想要实现：

Answer 1

溢出确实吃起来要挂出侧的任何元素。这就是溢出所做的。出于这个确切原因，工具提示往往不是它们相关元素的子元素，而是绝对定位的顶级元素，通过JS解决。

从本质上讲，你会做一些事情的这种喜欢：

HTML

<div id="tooltip"></div> 
<ul> 
    <li> 
     <a href="#">Todd</a> 
     <div class="tooltip-content">Todd is a guy and he's pretty cool.</div> 
    </li> 
</ul> 

的基本思路是，以拥有一个包含提示数据隐藏的div，而在另一个DIV你绝对定位的顶级水平。

的JavaScript

$("ul li a").hover(function(){ 
     //hover in 
     $("#tooltip").html($(this).next().html()).show(); // put the content of .tooltip-content into #tooltip, and show it 
     // figure out the position of the element we hovered over 
     var tt_top = $(this).offset().top, 
      tt_left = $(this).offset().left; 
     // position the tooltip based on that data 
     // same height, left + width of the ul, so the tooltip is on the right side of the ul 
     $("#tooltip").css({ 
      top: tt_top 
      left: tt_left + $("ul").width(); 
     }); 
    }, function(){ 
     // hover out 
     $("#tooltip").empty().hide(); // empty and hide tooltip 
    }); 

为了简便起见，我使用jQuery的在这里，但同样的原则也适用于纯JavaScript的解决方案，以及，如果你有那个时间。

CSS

#tooltip { 
     position: absolute; 
     display: none; 
     /* tooltip styles */ 
    } 

    .tooltip-content { 
     display: none; 
    } 

工具提示容器需要被绝对定位。在JavaScript中创建了top和left值。添加display:none;，以便在不需要时不会中断网页的其余部分。

还要添加display:none;来隐藏.tooltip-content元素，以便它们永远不可见;它们只是您在工具提示中需要HTML的容器。

我还没有测试过这个代码，但这是所有工具提示的基本原则，当你想打击overflow。