首页 文章

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

提问于
浏览 次
354

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

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

UPDATE:- 我找到了一种通过在 ul 周围添加另一个元素来实现相同结果的方法 . Check it out.

html css

6 回答

  • 6

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

    来自：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 spec也说：

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

    Short Version:

    如果您对 overflow-x 或 overflow-y 使用 visible 而对于另一个使用 visible 以外的其他内容，则 visible 值将被解释为 auto .

    回复于
  • 554

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

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

    回复于
  • 3

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

    UPDATE - New Solution:

    Original problem - > http://jsfiddle.net/xMddf/1/（即使我使用 overflow-y: visible 它变成了"auto"，实际上是"scroll" . ）

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

    The new solution - > 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;
}
    回复于
  • 0

    我尝试构建一个 fixed positioned sidebar 时，遇到垂直 scrollable content 和嵌套 absolute positioned children 为 displayed outside sidebar boundaries ，我遇到了这个问题 .

    我的方法包括单独申请：

    • 侧栏元素的 overflow: visible 属性

    • 一个 overflow-y: auto 属性到侧边栏内包装

    请查看以下示例或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>
    回复于
  • 69

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

    重要说明：根据 position ， overflow-* 等各种css组合，很容易让 content+wrapper, same-bounds 方法在一个浏览器或另一个浏览器上工作......但我从来没有用这种方法让它们全部正确（Edge，Chrome，苹果浏览器， ...） .

    但当我有类似的东西：

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

    ......所有的浏览器都很开心 .

    回复于
  • 78

    There is now a new way of addressing this issue - 如果从需要溢出y的容器中移除position：relative，你可以看到overflow-y visible和overflow-x hidden，反之亦然（有overflow-x visible和overflow-y hidden，只是确保具有visible属性的容器不是相对定位的） .

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

    回复于

相关问题