Исключение к переполнению: скрыто; имущество

Как можно сделать исключение в свойстве контейнера overflow:hidden; для сопоставленного набора дочерних элементов?

Здесь пример сцены:

<div style = "overflow:hidden;">
   <p>item</p>
   <p>item</p>
   <p class="special">item that needs to show itself outside the parent borders</p>
</div>

У меня есть причина, почему я это делаю:] Я создаю довольно сложное меню прокрутки, чьи элементы расширяются из границ меню. Меню явно зажимает все за пределами своих границ, так как оно прокручивается.

Вот фрагмент кода, относящийся к проблеме: http://jsfiddle.net/Birowsky/fNLbP/15/

Раскомментируйте отмеченную строку в JavaScript, чтобы увидеть проблему ниже "специального элемента". Вы можете заметить, что прокрутка не работает, все в порядке, я думаю, что это проблема.

Ответ 1

Я не думаю, что вы сможете найти способ сделать это. Даже если вы это сделаете, я бы рекомендовал не использовать его, потому что он, вероятно, не будет совместим с будущим или совместим с несколькими браузерами.

В случае меню вам, вероятно, лучше разместить эти элементы в отдельных div. Мне нужно будет увидеть ваш код в контексте, чтобы рекомендовать конкретный способ сделать что-то, но наложение ваших элементов, вроде этого, может сработать для вас:

<div style = "overflow: hidden; width: 200px; height: 100px; margin: 0; padding: 0; background-color: #CCCCCC; z-index: 1;">
   <p>item</p>
   <p>item</p>
</div>
<div style = "overflow: visible; width: 200px; height: 100px; margin: -30px 0 0 0; padding: 0; z-index: 2;">
   <p class="special">item that needs to show itself outside the parent borders</p>
</div>

Если это не соответствует вашим потребностям, возможно, вы могли бы лучше описать структуру своих меню, чтобы мы могли понять, что вам нужно? У вас есть ссылка на пример, возможно?

Изменить на основе новой информации

Посмотрев на ссылку , похоже, что вы хотите сделать это клип по горизонтали, но все же позволяете ему переполняться вертикально. Вы можете сделать это, используя очень высокое значение высоты, а затем установив отрицательное нижнее поле:

<div style="width: 200px; height: 2000px; margin: 0 0 -1960px 0; overflow: hidden;">
    <p>Thisisaverylongsentencedesignedtooverflowthewindowverticallysopleasepermitmetotypeitwithoutandspaces</p>
    Item 1<br />
    Item 2<br />
    Item 3<br />
    Item 4<br />
</div>

Это то, что вы хотите?

Ответ 2

Вы можете сделать элемент special абсолютно позиционированным

.special{
 position:absolute;
}

Но это будет работать только тогда, когда .special не определяет позицию (верхний/левый/нижний/правый), а также не будет использоваться, если вы позже захотите рассчитать высоту родительского div..

пример: http://jsfiddle.net/gaby/aT3We/

Требование хотя и немного странно, и, возможно, лучше переосмыслить всю проблему.
(что именно вы пытаетесь достичь с этим?)

Ответ 3

Зачем вам это нужно? Возможно, лучшее решение может быть сделано.

Я не думаю, что определение overflow: auto; выборочно возможно, поскольку overflow применяется к родительскому, а не к дочерним, поэтому ему нравится иметь color: red и color: blue на одном и том же элементе, в то же время время; они просто не имеют смысла при объединении (плохой пример, но вы получаете идею).

Ответ 4

У меня возникла такая проблема, когда вышеупомянутые решения не работали. Был список элементов в контейнере, каждый из которых мог быть разного размера в зависимости от того, сколько мест в списке (с минимальным). Контейнер переполнен: скрыт; и была часть элементов в списке, который был выпадающим и был бы отрезан.

Мое решение:

// get dropdown container position, make a modification, and apply to dropdown
function openDropdown(){
  var offSet = $('.dropdown.open').parent().offset();
  offSet.top = offSet.top + ($('.dropdown.open').parent().height() / 2);
  $('.dropdown.open').offset(offSet);
}

// on scroll reassess dropdown position
$(window).on('scroll', window, function(){
  if($('.dropdown.open')[0] != undefined){
    openDropdown();
  }
});

// on click close open dropdowns and open this one
$('body').on('click', '.dropdown', function(){
  $('.dropdown.open').removeClass('open');
  $(this).addClass('open');
  openDropdown();
});