垂直滾動條內沒有溢出的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。