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

Posted 2023-03-06

【中文标题】水平滚动条出现在右侧但左侧没有溢出内容？

【英文标题】：Horizontal scrollbar appears with overflow content on right but not on left?

【发布时间】：2017-05-09 04:05:11

【问题描述】：

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

Demo fiddle

* 
  overflow: visible;


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

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

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

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

【参考方案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;
  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>

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

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

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

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

【讨论】：

不，它不起作用。有滚动条，但没有向左滚动

【参考方案2】：

你应该遵循这个 css 代码

*
  overflow: visible;

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

【讨论】：

不，和我的基本一样

你用什么浏览器？ Chrome / Firefox / IE9 都不行。

我正在使用 Chrome / Firefox。

对不起瓦斯莉。这是我的错。你问我关于水平滚动条的问题，我正在回答你关于垂直滚动条的问题。我更新了我的代码。

对于水平滚动条出现这是基本的css结构。

【参考方案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>

【讨论】：

嗯，这是一个显示滚动条的技巧，但这里的目标块没有位于其容器之外的任何部分。我需要滚动显示未完全包含在正文中的元素。

好的，所以请检查编辑后的解决方案，让我知道它是否更合适。

同样，#test 部分位于 #container 之外，但 #test 和 #container 都完全位于 body 内。没有任何东西位于body 矩形之外。

不能在同一个容器外滚动。

嗯，看起来合乎逻辑，但与right 工作原理相同

【参考方案4】：

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

Working Fiddle

【讨论】：

你想要完成 Vasily 什么？使用底部滚动条将绿色 div 移到视图中？