Html CSS 溢出-x：可见；和溢出-y：隐藏；导致滚动条问题

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

提问by James Khoury

Suppose you have some style and the markup:

假设您有一些样式和标记：

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>

When you view this. The <ul>has a scroll bar at the bottom even though I've specified visible and hidden values for overflow x/y.

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

(observed on Chrome 11 and opera (?))

（在 Chrome 11 和歌剧（？）上观察到）

I'm guessing there must be some w3c spec or something telling this to happen but for the life of me I can't work out why.

我猜一定有一些 w3c 规范或某些东西告诉这种情况发生，但对于我的生活，我无法弄清楚原因。

JSFiddle

JSFiddle

UPDATE:-I found a way to acheive the same result by adding another element wrapped around the ul. Check it out.

更新：-我找到了一种方法，通过添加另一个包裹在ul. 一探究竟。

回答by James Khoury

After some serious searching it seems i've found the answer to my question:

经过一番认真的搜索，我似乎找到了我的问题的答案：

from: http://www.brunildo.org/test/Overflowxy2.html

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

In Gecko, Safari, Opera, ‘visible' becomes ‘auto' also when combined with ‘hidden' (in other words: ‘visible' becomes ‘auto' when combined with anything else different from ‘visible'). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.

在 Gecko、Safari、Opera 中，“可见”与“隐藏”组合时也会变为“自动”（换句话说：“可见”与“可见”以外的任何其他内容组合时变为“自动”）。Gecko 1.8, Safari 3, Opera 9.5 在其中相当一致。

also the W3C specsays:

也是W3C规范说：

The computed values of ‘overflow-x' and ‘overflow-y' are the same as their specified values, except that some combinations with ‘visible' are not possible: if one is specified as ‘visible' and the other is ‘scroll' or ‘auto', then ‘visible' is set to ‘auto'. The computed value of ‘overflow' is equal to the computed value of ‘overflow-x' if ‘overflow-y' is the same; otherwise it is the pair of computed values of ‘overflow-x' and ‘overflow-y'.

'overflow-x' 和 'overflow-y' 的计算值与其指定的值相同，除了某些与 'visible' 的组合是不可能的：如果一个被指定为 'visible' 而另一个是 'scroll'或 'auto'，则 'visible' 设置为 'auto'。如果 'overflow-y' 相同，则 'overflow' 的计算值等于 'overflow-x' 的计算值；否则它是 'overflow-x' 和 'overflow-y' 的计算值对。

Short Version:

精简版：

If you are using visiblefor either overflow-xor overflow-yand something other than visiblefor the other, the visiblevalue is interpreted as auto.

如果您使用visibleforoverflow-x或overflow-y和其他东西而不是visible其他，则该visible值被解释为auto。

回答by Justin Krause

another cheap hack, which seems to do the trick:

另一个便宜的黑客，这似乎可以解决问题：

style="padding-bottom: 250px; margin-bottom: -250px;"on the element where the vertical overflow is getting cutoff, with 250representing as many pixels as you need for your dropdown, etc.

style="padding-bottom: 250px; margin-bottom: -250px;"在垂直溢出被截断的元素上，250代表下拉列表所需的尽可能多的像素，等等。

回答by Macumbaomuerte

I originally found a CSS way to bypass this when using the Cycle jQuery plugin. Cycle uses JavaScript to set my slide to overflow: hidden, so when setting my pictures to width: 100%the pictures would look vertically cut, and so I forced them to be visible with !importantand to avoid showing the slide animation out of the box I set overflow: hiddento the container div of the slide. Hope it works for you.

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

UPDATE - New Solution:

更新 - 新解决方案：

Original problem-> http://jsfiddle.net/xMddf/1/(Even if I use overflow-y: visibleit becomes "auto" and actually "scroll".)

原始问题-> http://jsfiddle.net/xMddf/1/（即使我使用overflow-y: visible它也会变成“自动”并且实际上是“滚动”。）

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

The new solution-> http://jsfiddle.net/xMddf/2/(I found a workaround using a wrapperdiv to apply overflow-xand overflow-yto different DOM elements as James Khouryadvised on the problem of combining visibleand hiddento a single DOM element.)

新的解决方案-> 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;
}

回答by Andrea Carraro

I've run into this issue when trying to build a fixed positioned sidebarwith both vertically scrollable contentand nested absolute positioned childrento be displayed outside sidebar boundaries.

我想建立一个运行时，这个问题固定定位栏有两个垂直滚动的内容和嵌套绝对定位的孩子要显示侧边栏外边界。

My approach consisted of separately apply:

我的方法包括单独申请：

• an overflow: visibleproperty to the sidebar element
• an overflow-y: autoproperty to sidebar inner wrapper

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

Please check the example below or an online 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>

回答by dsdsdsdsd

I used the content+wrapperapproach ... butI did something different than mentioned so far: I made sure that my wrapper's boundaries did NOTline up with the content's boundaries in the direction that I wanted to be visible.

我使用的content+wrapper方法......但我确实比迄今为止提到的不同的东西：我确信，我的包装的边界也不要与内容的界限排队的，我想是可见的方向。

Important NOTE: It was easy enough to get the content+wrapper, same-boundsapproach to work on one browser or another depending on various css combinations of position, overflow-*, etc ... but I never could use that approach to get them allcorrect (Edge, Chrome, Safari, ...).

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

But when I had something like:

但是当我有这样的事情时：

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

... all browsers were happy.

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

回答by Alexandra

There is now a new way of addressing this issue- if you remove position: relative from the container which needs to have the overflow-y visible, you can have overflow-y visible and overflow-x hidden, and vice versa (have overflow-x visible and overflow-y hidden, just make sure the container with the visible property is not relatively positioned).

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

See this post from CSS Tricks for more details - it worked for me: https://css-tricks.com/popping-hidden-overflow/

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