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

HTML CSS

逆天前端宝儿

2020-03-18

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

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一探究竟。

第2188篇《CSS溢出-x:可见; 和溢出-y:隐藏;导致滚动条问题》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
Tom凯飞云 2020.03.18

我最初找到了一种使用Cycle jQuery插件绕过此问题的CSS方法。Cycle使用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;
}

The new solution -> http://jsfiddle.net/xMddf/2/ (I found a workaround using a wrapper div to apply overflow-x and overflow-y to different DOM elements as James Khoury advised on the problem of combining visible and hidden to a single DOM element.)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}
番长西里神无 2020.03.18

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

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

飞云番长番长 2020.03.18

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

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

神乐阿飞Itachi 2020.03.18

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

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

但是当我有类似的东西时:

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android