出现水平滚动条，但右上方有溢出内容？ [英] Horizontal scrollbar appears with overflow content on right but not on left?

问题描述

我在正文中有一个位置为的元素：绝对，其中一部分在左侧。

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

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

我希望水平滚动条会出现，从而可以将文档滚动到隐藏的部分元素，但事实并非如此。因此，我对此情况有一些疑问：

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. 为什么会发生这种情况，为什么滚动条不出现（与$ b正常工作$ b对称布局在右侧）？


2. 是否有可能使其出现
   并向左滚动？



3. 我是否缺少有关滚动条的最基本的内容？

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?

演示小提琴

Demo fiddle

推荐答案

为了显示滚动条，父元素必须具有设置的宽度。
对于使用属性 overflow-x：scroll的水平滚动条； 在父级上将使滚动条出现。

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

尝试回答您的问题：

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

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.

使用CSS display：rtl; 在父容器或主体上会使滚动条向左滚动而不是向右滚动，但是，如果对主体执行此操作，则整个文档现在将从右向左工作，从而更改页面中的所有位置。我建议使用CSS属性 display：rtl; 的父元素。

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 {
位置：静态；
高度：100像素；
宽度：100px；
overflow-x：滚动；
background-color：红色；
方向：rtl；
}

#test {
width：100px;
高度：100像素；
background-color：石灰；
职位：相对；
还剩：-50px；
}

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

当然，这意味着 #parent 元素始终完全可见。如果不希望这样做，则替代方法是来设置 direction：rtl; ，但要确保要正确显示的所有内容都位于包装div中的CSS 方向：ltr; 恢复正常流：

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 {
方向：rtl;
溢出：滚动;
}

#allOtherContent {
direction：ltr;
宽度：100％；
background-color：red;
}

#test {
width：100px;
高度：100像素；
background-color：石灰；
头寸：绝对；
还剩：-50px；
}

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

当另一个元素中的元素太大而无法容纳时，会出现滚动条。为此，浏览器需要知道父元素的确切大小才能确定测试元素太大，因此需要滚动。
在我的示例中， #parent 的宽度为 100px ，与 #test div，但是相对于 #parent #test div已被左移50px $ c>，因此 #test div现在需要150px的空间。父级现在有溢出的内容，CSS overflow-x：scroll; 添加了水平滚动条。
有关溢出和滚动条如何工作的更多信息，请参见： https： //developer.mozilla.org/en/docs/Web/CSS/overflow 。

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