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

Question

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

Demo fiddle

* {
  overflow: visible;
}

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

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

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

1. 为什么会这样，为什么不出现滚动条（在右侧对称布局下可以正常工作）？
2. 是否有可能让它出现并向左滚动？
3. 我是否遗漏了有关滚动条的任何基本内容？

Answer 1

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

听起来类似于这个问题： Div with horizontal scrolling only

尝试回答您的问题：

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

2. 在父容器或正文上使用 CSS display: rtl; 会使滚动条向左滚动而不是向右滚动，但是如果您对正文执行此操作，则整个文档现在将从右到左工作，从而更改页面中的所有位置.我建议使用 CSS 属性 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>

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

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>

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

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

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

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

Answer 2

你应该遵循这个 css 代码

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

Answer 3

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

direction: rtl;

这种行为是由于CSS direction property。

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

这就是为什么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>

Answer 4

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

Working Fiddle