向左溢出产生滚动条

Question

此代码使浏览器在内容大于window时出现水平滚动条，向右溢出：

div.a {
  position: relative;
  float: left;
  background-color: red;
}
div.b {
  position: absolute;
  top: 100%;
  left: 100%;
  background-color: blue;
  white-space: nowrap;
}

<div class="a">Text1
  <div class="b">
    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
  </div>
</div>

但是如果我让第一个 div 向右浮动，然后第二个向左浮动，浏览器不会制作水平滚动条，溢出的文本也无法查看。

div.a {
  position: relative;
  float: right;
  background-color: red;
}
div.b {
  position: absolute;
  top: 100%;
  right: 100%;
  background-color: blue;
  white-space: nowrap;
}

<div class="a">
  Text1
  <div class="b">
    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
  </div>
</div>

我能否以某种方式更改此行为，以便在内容大于 window 时向左滚动，向左溢出？

在 FF 47、IE 11、Opera 38 上测试 - 都做同样的事情。

如果 html/css 无法更改此行为，那么浏览器选择执行当前操作的原因是什么？他们有什么理由不能 'fixed' 吗？对于仅支持从右到左语言的网站，当前的行为是否也会有问题，我认为这些网站希望能够使用这样的布局？

Answer 1

使用 css，您无法判断某些内容何时溢出屏幕或浏览器。您必须使容器不超过该宽度，并使 HIM（容器）在溢出时显示他的卷轴。例如 div:

div
{
    width: 600px;   
    overflow: auto;    
    overflow-y: hidden;
}

所以我的重点是，如果容器中的内容大于其宽度，您可以在容器上显示滚动条。

这是你想要的吗？

Answer 2

将容器与div一起使用，这样它就不会溢出，并且您可能知道容器的大小，以便可以相应地调整下一个容器。

Answer 3

你有一个非常具体的例子，这样的东西对你有用吗？我确实需要使用一点 jquery（你可以使用 javascript）。如果您没有任何其他会受到影响的内容，您可以在 HTML 标签上放置一个 rtl 并保持您在该元素上的绝对位置。

if ($("#b").prop('scrollWidth') > $("body").width() ) { //Security Check
  $('html').css('direction', 'rtl');
}
else {
  $('html').css('direction', 'ltr');
}

div.a
{
  position: relative;
  float: right;
  background-color: red;
}
div.b
{
  position: absolute;
  top: 100%;
  right: 100%;
  background-color: blue;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Text1
  <div class="b" id="b">
    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
  </div>
</div>

Answer 4

因此，在正确的位置使用 dir 属性，您可以完成我想要的一半。但是你不能吃蛋糕就吃 - 我希望能够向左滚动以查看向左溢出的内容，也可以向右滚动以查看向右溢出的内容。不管有没有这个 dir 黑客攻击，您仍然有一些无法查看的内容。

没有 dir hack，无法看到所有 Longtext2

div.a
{
  position: relative;
  float: right;
  background-color: red;
}
div.b
{
  position: absolute;
  top: 100%;
  right: 100%;
  background-color: blue;
}

<html>
  <head>
    <style type="text/css">

    </style>
  </head>
  <body>
    <div>
      Start_Longtext1Longtext1Longtext1Longtext1Longtext1_End
    </div>
    <div class="a">
      Text1
      <div class="b">
        Start_Longtext2Longtext2Longtext2Longtext2Longtext2_End
      </div>
    </div>
  </body>
</html>

使用 dir hack，无法看到所有 Longtext1。

div.a
{
  position: relative;
  float: right;
  background-color: red;
}
div.b
{
  position: absolute;
  top: 100%;
  right: 100%;
  background-color: blue;
}

<html>
  <head>
    <style type="text/css">

    </style>
  </head>
  <body dir="rtl">
    <div dir="ltr">
      Start_Longtext1Longtext1Longtext1Longtext1Longtext1_End
    </div>
    <div class="a" dir="ltr">
      Text1
      <div class="b">
        Start_Longtext2Longtext2Longtext2Longtext2Longtext2_End
      </div>
    </div>
  </body>
</html>

所以，遗憾的是，目前似乎无法使当前浏览器能够滚动查看两者（滚动条初始位置在文档原点，对应于滑块在中间某处）。就像在这个模型中一样：

Answer 5

Can a scroll bar appear for content overflowing the browser window to the left?

没有。除非你破解它。

考虑内容流。

在从左到右的语言模式下，内容向右溢出。它不会向左溢出。

因此，overflow 属性不适用于左侧，因为没有溢出。

在从右到左的语言中，情况正好相反。

这就是为什么将您的内容切换到 RTL 模式 – 使用 CSS direction 属性或 HTML dir 属性 – 可以启用 RTL 滚动在 LTR 语言中（但它是一种 hack，可能会变得混乱）。

来自规范：

11.1.1 Overflow: the overflow property

This property specifies whether content of a block container element is clipped when it overflows the element's box.

同样，在 LTR reading/writing 模式下，内容不会向左溢出。

通常调用 overflow 属性来滚动到视口的左侧，只是因为 overflow 通常与滚动条相关联。但实际上请求是专门的滚动，与 overflow.

无关

向左溢出产生滚动条

Generate scroll bar for overflow to the left

html

css

overflow