Working Fiddle

Question

我在position: absolute中有一个body的元素，左侧是的一部分左侧。

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

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

为什么会这样，为什么不出现滚动条（它可以正常使用右侧的对称布局）？

是否有可能成功出现并滚动到左侧？

我是否遗漏了关于滚动条的任何基本知识？

Demo fiddle

Answer 1

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

与此问题类似： Div with horizontal scrolling only

尝试回答您的问题：

使用right: -50px时会出现滚动条，因为HTML文档的标准流程是从左到右。 CSS将#test div推出，浏览器能够继续向右渲染。在这一点上看起来div的一部分可能看起来像身体一样，但事实并非如此。 HTML页面上显示的所有内容都必须在正文中。
在父容器或正文上使用CSS display: rtl;会使滚动条向左而不是向右滚动，但是如果您对主体执行此操作，整个文档现在将从右向左工作，从而更改所有在页面中的定位。我建议使用CSS属性display: rtl;的父元素。

#parent { position: static; height: 100px; width: 100px; overflow-x: scroll; 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>

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

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>
当另一个元素中的元素太大而不适合时，会出现滚动条。为此，浏览器需要知道父元素的确切大小，以确定测试元素太大，因此需要滚动。在我的示例中，#parent的宽度为100px，与#test div相同，但#test div相对于#parent向左推50px因此#test div现在需要150px的空间。父级现在有溢出的内容，CSS overflow-x:scroll;添加了我们的水平滚动条。有关溢出和滚动条如何工作的更多信息，请访问：https://developer.mozilla.org/en/docs/Web/CSS/overflow。

希望这有助于回答您的问题。

Answer 2

将overflow-x: scroll;添加到#test div将为您提供水平滚动条。

Working Fiddle

Answer 3

你应该遵循这个css代码

*{
  overflow: visible;
}
#test{
  position: absolute;
  height: 100px;
  width: 100px;
  overflow-y:scroll;
  left: -50px;
  background-color: lime;
}

Answer 4

您需要在可滚动的div中将方向从左向右（默认）更改为从右向左。

direction: rtl;

此行为是由CSS direction property。

引起的

CSS中的direction属性设置块级元素中内容流的方向。这适用于text，inline和inline-block元素。它还设置文本的默认对齐方式以及表格单元格在表格行中流动的方向。

这就是为什么它在negative value is in the right rather than the left时工作，因为流从左到右（ltr），而负右边使可滚动区域适应。

body {
  overflow: auto;
  direction: rtl;
}

#test {
  position: absolute;
  height: 100px;
  width: 100px;
  left:-50px;
  background-color: lime;
}

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

出现水平滚动条，右侧有溢出内容，但左侧没有？

4 个答案:

Working Fiddle