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

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

 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周围的元素来达到相同的结果。看看这个。

#1楼

我最初找到了一种使用Cycle jQuery插件绕过此问题的CSS方法。 Cycle使用JavaScript将幻灯片设置为overflow: hidden ，因此将图片设置为width: 100%的图片看起来是垂直切割的，因此我用!important强制使其可见，并避免在幻灯片中显示幻灯片动画。框，我将overflow: hidden设置为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/ （我找到了一种解决方法，如James Khoury所建议的，将wrapper div应用于对不同的DOM元素应用overflow-x和overflow-y ，有关合并visible和visible的问题hidden到单个DOM元素。）

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

#2楼

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

重要说明：根据position ， overflow-*等的各种CSS组合，很容易获得content+wrapper, same-bounds方法在一种浏览器或另一种浏览器上工作，但是我永远无法使用这种方法来获得它们都正确（Edge，Chrome，Safari等）。

但是当我有类似的东西：

  <div id="hack_wrapper" // created solely for this purposestyle="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>

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

#3楼

另一个廉价的技巧，似乎可以解决问题：

style="padding-bottom: 250px; margin-bottom: -250px;" 在垂直溢出将被截断的元素上，其中250代表下拉菜单所需的像素数，依此类推。

#4楼

在尝试构建具有垂直可滚动内容和嵌套绝对位置子项的固定定位边栏以显示在边栏边界之外时，我遇到了这个问题。

我的方法包括分别适用：

overflow: visible侧边栏元素的overflow: visible属性
overflow-y: auto侧边栏内部包装的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>

#5楼

现在，有一种解决此问题的新方法 -如果您删除了位置：需要从容器中看到需要相对于溢出Y的相对位置，您可以让相对可见的Y溢出和不可见的X处于隐藏状态，反之亦然（有溢出- x可见且溢出-y隐藏，只需确保具有visible属性的容器没有相对放置即可。

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

#6楼

经过一番认真的搜索之后，看来我已经找到了问题的答案：

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

在Gecko，Safari，Opera中，与“隐藏”组合使用时，“可见”也变为“自动”（换句话说：当与“可见”以外的其他任何元素组合时，“可见”变为“自动”）。其中的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”的一对计算值。

简洁版本：

如果您对overflow-x或overflow-y使用visible ，而对overflow-x而不是visible ，则visible值将解释为auto 。

CSS溢出-x：可见; 和溢出-y：隐藏；导致滚动条问题相关推荐

CSS边框,背景,边距,溢出
CSS边框,背景,边距,溢出 css边框属性 border:宽度样式颜色; border-color; border-style; 边框样式:solid实现,dotted点状线,dashed虚线 ...
css中多行文本溢出显示省略号的方法
下面这几行代码可以直接复制到css样式中,实现溢出显示省略号的效果 overflow: hidden; //首先固定宽高,然后让溢出的文字隐藏 text-overflow: ellipsis; dis ...
纯CSS的方法解决文字溢出与截断的问题
纯CSS的方法解决文字溢出与截断的问题参考文章: (1)纯CSS的方法解决文字溢出与截断的问题 (2)https://www.cnblogs.com/ilian/archive/2012/06/07 ...
css换行方式和文字溢出
css换行几种方式强制不换行 div{white-space:nowrap; } 自动换行 div{word-wrap:break-word; } 强制英文单词断行 div{word-break:b ...
缓冲区溢出漏洞_缓冲区溢出漏洞简介
缓冲区溢出漏洞重点 (Top highlight) 缓冲 (Buffer) A buffer is a temporary storage, usually present in the physi ...
使用CSS隐藏元素滚动条【兼容主流浏览器】
如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置 overflow:auto 样式即可.想要完全隐藏滚动条只需设置 overflow:hid ...
使用CSS隐藏元素滚动条
如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置overflow:hidden ...
html 如何判断文本溢出,判断文本是否溢出
问题需求:当一个div的内容过多时,显示省略号,并提供一个显示更多的按钮:如果内容较少,正常展示不提供按钮. 分析:以上问题的本质就在于,如何判断div的内容溢出了 (为了方便,方案采用vue的写法 ...
vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...

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

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

CSS溢出-x：可见; 和溢出-y：隐藏；导致滚动条问题相关推荐

最新文章

热门文章

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

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

CSS溢出-x：可见; 和溢出-y：隐藏； 导致滚动条问题相关推荐

最新文章

热门文章

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

CSS溢出-x：可见; 和溢出-y：隐藏；导致滚动条问题相关推荐