溢出 y 隐藏中断溢出 x 可见答案

【问题标题】：Overflow y hidden breaks overflow x visible溢出 y 隐藏中断溢出 x 可见
【发布时间】：2015-04-17 02:15:06
【问题描述】：

我有一个 div（蓝色框），它在父元素（红色框）内的页面上绝对定位，我需要将溢出 y 设置为隐藏，以便它强制 Y 轴上溢出的内容被砍掉了，但我希望任何溢出-x 的内容都可见。

HTML：

<div id="box1">
    <div id="box2">
        <div style="width:200px;height:640px;background:red;position:relative;">
            <div style="width:200px;height:200px;background:blue;position:absolute;left:200px;top:100px;"></div>
        </div>
    </div>
</div>

和 CSS：

#box1 {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:200px;
    overflow-y: hidden;
    border: green 10px solid;
}
#box2 {
    width: 200px;
    overflow-x: visible;
}

这是一个小提琴：http://jsfiddle.net/3dhdy9e9/12/

在阅读有关 Stack Overflow 上的主题/问题的一些文章后，如果将 hidden 应用于相同的 DOM 元素，显然溢出会被 scroll 覆盖，因此我将代码拆分为使用 box1 和 @987654328 @。

基本上我希望绿色框成为强制内容隐藏在 Y 轴上但允许内容在 X 轴上流出的容器：

我看不到蓝色框，因为它被隐藏从溢出 Y 中截断，即使它的子元素设置为可见/自动...

绿框应该被限制为 200px 宽，这样它高度以下的内容就会被截断，蓝框应该能够流出（通过绝对位置）而不影响绿框的宽度（如果我删除隐藏的溢出就可以了）。

【问题讨论】：

如果你想“上下滚动”然后overflow-y（上下）隐藏将不这样做。看着你的小提琴，在我的浏览器上它有一个 X 滚动条和一个全高框，我无法区分你真正想要实现的目标？你（或者我有吗？）把你的 x 和 y 搞混了吗？
我已经改写了问题以删除滚动引用（因为处理方式不同并且超出了问题的范围）。基本上我希望 Y 轴隐藏但 X 可见。
正如其他人所说 - overflow-x: visible 似乎做你想做的事
如果不将宽度值更改为min-width，您将无法实现此更新，因为当前将框保持在最大 200 像素宽。
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue的可能重复

标签： html css

【解决方案1】：

改编自 Justin Krause 在此线程中的回答，这对我有用： CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue.

将 box1（绿色边框的视口）设置为具有相互抵消的边距和填充，边距包围较大的框：例如

margin-right: -100px; /* width of blue box */
padding-right: 100px;

这应该会导致蓝色框可见，而无需设置overflow-x。

【讨论】：

那么边距应该是负数吧？因为填充的负值无效。

【解决方案2】：

这是我的处理方法。

#box1 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  overflow: visible;
  border: green 10px solid;
}

#box2 {
  overflow: hidden;
  height: 100%;  /* Explicitly declare an height & width */
  width: 100%;
}

<div id="box1">
    <div id="box2">
        <!-- remove position: relative -->
        <div style="width:200px;height:640px;background:red;">
            <div style="width:200px;height:200px;background:blue;position:absolute;left:200px;top:100px;"></div>
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

我认为我正在阅读您的问题...

overflow-x:auto;

http://jsfiddle.net/3dhdy9e9/1/

【讨论】：

我在 Firefox 上根本看不到滚动条。这是故意的吗？

【解决方案4】：

在#box2 中将overflow-x:visible 替换为overflow-x:auto。希望这能解决你的问题

【讨论】：

对我来说，这会导致 x 轴也滚动，这是不希望的。水平溢出应该是可见的。

【解决方案5】：

所以我可以让这个工作的唯一方法是将蓝色框的位置设置为固定，然后使用 JavaScript 更改文档就绪和窗口大小调整的顶部和左侧值。

在这里提琴：http://jsfiddle.net/3dhdy9e9/15/

代码：

function positionBox(){
 var left = $('#theBox').offset();
left = left.left;

var top = $('#theBox').offset();
top = top.top;

    $('#theBox').css({ 'position': 'fixed', 'left': left, 'top': top });   
}

$(document).ready(function(){
    positionBox();
    $(window).resize(function(){
        positionBox();
    });
});

【讨论】：