Question

如何才能在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中的标记行，以查看“特殊项目”下方的问题。您可能会注意到滚动不起作用，没关系，我认为这是小问题。

Answer 1

您可以将special元素置于绝对位置

.special{
 position:absolute;
}

但这仅在.special未定义位置（ top / left / bottom / right ）时才有效，如果您以后想要计算它也不会被使用父div的高度..

示例： http://jsfiddle.net/gaby/aT3We/

这个要求虽然有点奇怪，但重新考虑整个问题可能会更好（你究竟想用这个来实现什么？）

Answer 2

我认为你无法找到办法。即使你这样做，我也建议不要使用它，因为它可能不会出现面向未来或跨浏览器的兼容性。

如果是菜单，最好将这些项目放在不同的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>

如果这不符合您的需求，也许您可以更好地描述菜单的结构，以便我们能够理解您的需求？你有一个例子的链接吗？

根据新信息进行修改

查看example link后，您想要做的就是水平剪辑内容，同时仍允许它垂直溢出。您可以使用非常高的高度值，然后设置负底边距来执行此操作：

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

这是你想要的吗？

Answer 3

我遇到了上述解决方案无效的问题。容器中有一个项目列表，每个项目的大小可能会有所不同，具体取决于列表中的位置（最小值）。容器溢出：隐藏;并且列表中有一部分项目是下拉式的，并且会被切断。

我的解决方案：

// 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();
});

Answer 4

你为什么需要这样做？也许可以做出更好的解决方案。

我不认为有选择地定义overflow: auto;是可能的，因为overflow适用于父级，而不是它的子级，所以就像拥有color: red和color: blue一样在同一个元素上，同时;它们只是在放在一起时没有意义（不好的例子，但你明白了）。

溢出的例外：隐藏;属性

4 个答案: