水平滚动条出现在右侧但左侧没有溢出内容? [英] Horizontal scrollbar appears with overflow content on right but not on left?

问题描述

我在 body 中有一个 position: absolute 元素，它的某些部分 在左侧从左侧.

演示小提琴

* {溢出:可见；}#测试 {位置:绝对；高度:100px；宽度:100px；左:-50px；背景颜色:石灰；}

<div id="test"></div>

我希望水平滚动条应该出现，允许将文档滚动到元素的隐藏部分，但事实并非如此.所以，我对这个案例有一些疑问:

1. 为什么会这样，为什么没有出现滚动条(它在右侧对称布局下工作正常)?
2. 是否可以让它出现并向左滚动?
3. 我是否遗漏了关于滚动条的一些非常基本的东西?

解决方案

为了让滚动条出现，父元素必须有一个设置的宽度.对于在父级上使用属性 overflow-x:scroll; 的水平滚动条将使滚动条出现.

听起来与此问题类似:仅支持水平滚动的 Div

尝试回答您的问题:

1. 当您使用 right: -50px 时会出现滚动条，因为 HTML 文档的标准流程是从左到右.CSS 将 #test div 推出，浏览器能够继续向右渲染.此时可能看起来 div 的一部分超出了主体，但事实并非如此.HTML 页面上可见的所有内容都必须在正文中.

2. 在父容器或正文上使用 CSS display: rtl; 会使滚动条向左滚动而不是向右滚动，但是如果您对正文这样做，整个文档现在就会从右到左工作，更改页面中的所有位置.我建议使用 CSS 属性 display: rtl;.

   的父元素

#parent {位置:静态；高度:100px；宽度:100px；溢出-x:滚动；溢出-y:隐藏；背景颜色:红色；方向:rtl；}#测试 {宽度:100px；高度:100px；背景颜色:石灰；位置:相对；左:-50px；}

<div id="测试">

当然这意味着 #parent 元素总是完全可见的.如果这不是想要的，那么替代是来设置 direction:rtl; 但确保您想要正确显示的任何内容都在具有 CSS 的包装器 div 中方向:ltr; 恢复正常流程:

body {方向:rtl；溢出:滚动；}#allOtherContent {方向:ltr;宽度:100%；背景颜色:红色；}#测试 {宽度:100px；高度:100px；背景颜色:石灰；位置:绝对；左:-50px；}

<div id="test"></div><div id="allOtherContent"></div>

3. 当另一个元素中的元素太大而无法容纳时，会出现滚动条.为此，浏览器需要知道父元素的确切大小，以确定测试元素太大，因此需要滚动.

在我的示例中，#parent 的宽度为 100px，与 #test div 相同，但是 #test div 已相对于 #parent 向左推送 50px，因此 #test div 现在需要 150px的空间.父级现在有溢出的内容，CSS overflow-x:scroll; 添加了我们的水平滚动条.

可以在此处找到有关溢出和滚动条如何工作的更多信息:https://developer.mozilla.org/en/docs/Web/CSS/overflow.

希望能帮助回答您的问题.

I have an element with position: absolute in body with some part of it to the left from left side.

Demo fiddle

* {
  overflow: visible;
}

#test {
  position: absolute;
  height: 100px;
  width: 100px;
  left: -50px;
  background-color: lime;
}

<div id="test"></div>

I expect that horizontal scrollbar should appear allowing to scroll the document to the hidden part of the element, but it doesn't. So, I have some questions about the case:

1. Why it happens so, why scrollbar doesn't appear (it works fine with symmetric layout on the right side)?
2. Is it ever possible to make it appear and scroll to the left ?
3. Am I missing anything very basic about scrollbars?

解决方案

In order to have scrollbars appear, the parent element must have a set width. For horizontal scrollbars using the property overflow-x:scroll; on the parent will make the scrollbar appear.

Sounds similar to this issue: Div with horizontal scrolling only

To try and answer your questions:

1. The scrollbar appears when you use right: -50px because the standard flow of a HTML document is left to right. The CSS pushed the #test div out and the browser is able to continuing rendering to the right. It may look like part of the div is outwith the body at this point but it is not. Everything visible on an HTML page must be within the body.

2. Using the CSS display: rtl; on a parent container or the body would make the scrollbars scroll left instead of right, however if you did this to the body the whole document would now work right to left, changing all positioning in the page. I'd suggest having a parent element with the CSS property display: rtl;.

#parent {
  position: static;
  height: 100px;
  width: 100px;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: red;
  direction: rtl;
}

#test {
  width: 100px;
  height: 100px;
  background-color: lime;
  position: relative;
  left: -50px;
}

<div id="parent">
  <div id="test">
  </div>
</div>

Of course this means the #parent element is always fully visible. If this was not wanted then the alternative is to set the direction:rtl; but ensure any content you want displayed correctly is then in a wrapper div which has CSS direction: ltr; to resume normal flow:

body {
  direction: rtl;
  overflow: scroll;
}

#allOtherContent {
  direction: ltr;
  width: 100%;
  background-color: red;
}

#test {
  width: 100px;
  height: 100px;
  background-color: lime;
  position: absolute;
  left: -50px;
}

<div id="test"></div>
<div id="allOtherContent"></div>

3. Scrollbars appear when elements within another element are too big to fit. For this to work the browser needs to know the exact size of the parent element to determine that the test element is too big, and therefore needs to scroll.

In my example the #parent has a width of 100px, the same as the #test div, however the #test div has been pushed left 50px relative to #parent and therefore the #test div now requires 150px of space. The parent now has overflowing content and the CSS overflow-x:scroll; adds our horizontal scrollbar.

More on how overflow and scrollbars work can be found here: https://developer.mozilla.org/en/docs/Web/CSS/overflow.

Hope that helps answer your questions.

这篇关于水平滚动条出现在右侧但左侧没有溢出内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！