溢出y隐藏的断点溢出x可见

Question

我有一个div（蓝色框）在父元素（红色框）内的页面上绝对定位，我需要将overflow-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上的主题/问题的一些文章后，如果隐藏被应用于同一个DOM元素，显然溢出会被scroll覆盖，因此我将代码拆分为使用{{1} }和box1。

基本上我希望绿色框是强制内容隐藏在Y轴上但允许内容按照屏幕截图在X轴上流出的容器：

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

绿色框应该被限制在200px宽，以便切断其高度以下的内容，并且蓝色框应该能够流出（通过绝对位置）而不会影响绿色框的宽度（如果我删除隐藏的溢出，这将工作正常。）

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

Answer 2

我认为我正在正确地阅读你的问题......

overflow-x:auto;

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

Answer 3

在＃box2中，用overflow-x：auto替换overflow-x：visible。 希望这能解决您的问题

Answer 4

所以我唯一能做到这一点的方法是设置要修复的蓝色框的位置，然后使用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();
    });
});

Answer 5

以下是我如何做到这一点。

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