水平滚动条出现右侧溢出内容但左侧不出现？

Question

我有一个元素position: absolute，body其某些部分位于左侧。

演示小提琴

* {
  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 Horizo​​ntal Scrolling only

尝试回答您的问题：

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

2. 在父容器或主体上使用 CSSdisplay: 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;但确保您想要正确显示的任何内容都位于包装器 div 中，该 div 具有 CSSdirection: 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>

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

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

有关溢出和滚动条如何工作的更多信息，请参见：https://developer.mozilla.org/en/docs/Web/CSS/overflow。

希望能帮助解答您的问题。