html - 设置溢出-x : hidden adds a vertical scrollbar

标签 html css

<分区>

当我指定 overflow-x: hidden 时在水平和垂直溢出的元素上,除了隐藏水平溢出的内容之外,该元素还有一个垂直滚动条。我试过添加 overflow-y: visible甚至只是overflow: visible , 没有效果。

我是不是误解了这些属性的作用?我会认为 overflow-x根本不应该影响垂直溢出。

这在我尝试过的每个浏览器上都发生过。

这是演示效果的片段。我正在使用 <pre>标签,因为它们是创建溢出内容的简单方法,但似乎任何标签都会发生这种情况。

pre {
  height: 40px;
  width: 150px;
  margin-bottom: 50px; /* We need this so they don't overlap. */
}

#x-hidden {
  overflow-x: hidden;
}

#y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

#visible {
  overflow: visible;
  overflow-x: hidden;
}
<pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="x-hidden">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="y-visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

W3C spec说:

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

但这并没有提到 overflow-x 的情况。或 overflow-y设置为 hidden ,这对我来说意味着这种组合确实是可能的。

最佳答案

查看相关问题的答案:https://stackoverflow.com/a/6433475/3583023

解释原因

el {
  overflow-x: hidden;
  overflow-y: visible;
}

呈现为

el {
  overflow-x: hidden;
  overflow-y: auto;
}

通常呈现相同的

el {
  overflow-x: hidden;
  overflow-y: scroll;
}

因为overflow-yauto值在大多数浏览器中都是scroll

所以,为了达到这个效果,我们不能使用overflow-x/overflow-y属性。我已经尝试将 clip 属性作为一个潜在的替代方案,但到目前为止运气不佳:http://jsfiddle.net/qvEq5/

关于html - 设置溢出-x : hidden adds a vertical scrollbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6179831/

相关文章:

jquery - 将菜单字符更改为 x

javascript - 将 @supports 与样式组件一起使用

html - 图像结束后水平对齐新的文本行

php - 常用元素 php html navbar

javascript - 如何使用 jQuery 平滑地最小化飞行的可拖动弹出窗口

javascript - 使用 CSS 更改按钮上的 CSS

html - 仅覆盖父 div 的叠加层

javascript - 如何创建当用户点击左侧产品时,详细信息将显示在右侧

css - 移动浏览器中的 WordPress 仍然允许缩放

javascript - 如何找到子div位置的div特定的第N个 sibling