CSS overflow-x:visible; 溢出-y:隐藏; 导致滚动条问题

Question

假设你有一些风格和标记:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

当你看到这个.该<ul>有一个在底部的滚动条,即使我已经溢出X/Y指定的可见和隐藏价值.

(在Chrome 11和opera(？)上观察到)

我猜测必须有一些w3c规范或者某些东西告诉这件事发生但是对于我的生活我无法理解为什么.

的jsfiddle

更新: -我找到了一种方法来通过添加另一个元素来实现相同的结果ul.看看这个.

Answer 1

经过一番认真的搜索后,我似乎找到了问题的答案:

来自:http://www.brunildo.org/test/Overflowxy2.html

在Gecko,Safari,Opera中,'visible'在与'hidden'结合使用时变为'auto'(换句话说:'visible'与其他与'visible'不同的东西组合成'auto').Gecko 1.8,Safari 3,Opera 9.5在它们中非常一致.

也是W3C规范说:

'overflow-x'和'overflow-y'的计算值与它们的指定值相同,除了某些与'visible'的组合是不可能的:如果一个被指定为'visible'而另一个被指定为'scroll'或'自动',然后'可见'设置为'自动'.如果'overflow-y'相同,'overflow'的计算值等于'overflow-x'的计算值; 否则它是'overflow-x'和'overflow-y'的计算值对.

精简版:

如果你正在使用visible的任一overflow-x或overflow-y比其他东西,并visible为其他的visible值被解释为auto.

Answer 2

另一个廉价的黑客,似乎可以做到这一点:

style="padding-bottom: 250px; margin-bottom: -250px;"在垂直溢出被截止的元素上,250表示您下拉列表所需的像素数等.

Answer 3

在使用Cycle jQuery插件时,我最初发现了一种绕过它的CSS方法.循环使用JavaScript将我的幻灯片设置为overflow: hidden,所以当我将图片设置width: 100%为图片时,看起来会垂直切割,因此我强制它们可见,!important并避免显示幻灯片动画开箱即用设置overflow: hidden为容器div滑动.希望对你有效.

更新 - 新解决方案:

原始问题 - > http://jsfiddle.net/xMddf/1/ (即使我使用overflow-y: visible它变成"自动"并实际上"滚动".)

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

新的解决方案 - > http://jsfiddle.net/xMddf/2/ (我找到了一个解决方法,使用包装 div来应用overflow-x和overflow-y不同的DOM元素,因为James Khoury建议组合visible和hidden单个DOM元素的问题.)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}

Answer 4

对于我的用例，添加overflow-x:visible; overflow-y:clip到具有溢出的 div 似乎给了我隐藏 Y 轴上的溢出的所需效果，同时不在 X 轴上提供滚动条（我有一个正在加载全尺寸图像的轮播滑块在再次缩小它们之前，这些图像在加载时占据了页面高度的 75%，因此不需要overflow-y）。

不需要父包装 div，只需height在溢出元素上固定设置即可。我意识到这个解决方案可能并不适合所有人，但它肯定可以帮助一些人。

Answer 5

我遇到了同样的问题，以下解决方案有效（样式应用于父块）

overflow-y: visible;
overflow-x: clip;

Answer 6

现在有了解决这个问题的新方法- 如果你从容器中删除 position: relative ，它需要让溢出-y 可见，你可以让溢出-y 可见和溢出-x 隐藏，反之亦然（有溢出- x可见和溢出-y隐藏，只需确保具有visible属性的容器没有相对定位）。

有关更多详细信息，请参阅 CSS Tricks 中的这篇文章 - 它对我有用：https : //css-tricks.com/popping-hidden-overflow/

Answer 7

我在尝试构建一个固定定位的侧边栏时遇到了这个问题,该侧边栏包含可垂直滚动的内容和嵌套的绝对定位子窗口,以显示在侧边栏边界之外.

我的方法包括单独申请:

• overflow: visible侧边栏元素的属性
• overflow-y: auto侧边栏内包装的属性

请查看以下示例或在线codepen.

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  background: linear-gradient(to bottom, white, DarkGray 80%);
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 200px;
  overflow: visible;  /* Just apply overflow-x */
  background-color: DarkOrange;
}

.sidebarWrapper {
  padding: 10px;
  overflow-y: auto;   /* Just apply overflow-y */
  height: 100%;
  width: 100%;
}

.element {
  position: absolute;
  top: 0;
  right: 100%;
  background-color: CornflowerBlue;
  padding: 10px;
  width: 200px;
}

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
  <div class="sidebarWrapper">
    <div class="element">
      I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
    </div>
    <p>This is a 200px width container with optional vertical scroll.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</div>

Answer 8

我使用了这种content+wrapper方法... 但是我做的事情与到目前为止所提到的有所不同：我确保包装器的边界不在我希望可见的方向上与内容的边界对齐。

重要提示：这是很容易够得着content+wrapper, same-bounds的工作方式在一个浏览器或其他取决于各种CSS组合position，overflow-*等等...但我从来没有使用这种方法，让他们所有正确的（边，铬，野生动物园。 ..）。

但是当我有类似的东西：

  <div id="hack_wrapper" // created solely for this purpose
       style="position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id="content_wrapper"
           style="position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

...所有浏览器都很高兴。