Вертикальная полоса прокрутки внутри div без переполнения-y: прокрутка

Question

Я пытаюсь создать имитационную «подсказку» для моего проекта.

Проблема заключается в том, что родительский контейнер имеет «переполнение-у: прокручивать» свойство применяется к нему (мне нужна вертикальная полоса прокрутки там) и он просто клипами свои дочерние элементы, когда я пытаюсь переместить их из контейнера. Есть ли способ, которым я могу иметь вертикальную полосу прокрутки без переполнения?

Это то, что я есть и что я хочу добиться:

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; 
    } 

Тултип контейнер должен быть установлен абсолютно. Значения top и left создаются в JavaScript. Добавьте display:none;, чтобы он не нарушал остальную страницу, когда она была ненужной.

Также добавьте display:none;, чтобы скрыть элементы .tooltip-content, чтобы они никогда не были видны; они являются только контейнерами для HTML, которые вы хотите в всплывающей подсказке.

Я не тестировал этот код, но это основной принцип всех всплывающих подсказок, когда вы хотите сражаться с overflow.