Question

当内容大于窗口时，此代码使浏览器有一个水平滚动条，溢出到右边：

＆＃13;

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

＆＃13;

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

＆＃13;

但是如果我让第一个div向右浮动然后第二个向左定位，浏览器就不会创建一个水平滚动条，并且无法查看溢出的文本。

＆＃13;

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

＆＃13;

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

＆＃13;

我可以以某种方式更改此行为，如果内容大于窗口，则能够向左滚动，向左溢出？

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

如果html / css无法更改此行为，浏览器选择执行目前操作的原因是什么？有什么理由说他们无法修复＆＃39 ;?目前的行为对于仅适合从右到左语言的网站来说也不会有问题，我认为这些网站可以使用这样的布局吗？

Answer 1

因为你有一个非常具体的例子，这样的工作对你有用吗？我确实必须使用一个小jquery（你可以使用javascript）。如果您没有任何其他会受到影响的内容，您可以在HTML代码上放置一个rtl并保持您在该元素上的绝对位置。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

如果没有dir黑客，则无法查看所有Longtext2

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 3

如果内容溢出浏览器窗口到左边会出现滚动条吗？

没有。除非你破解它。

考虑内容的流动。

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

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

从右到左的语言，情况恰恰相反。

这就是为什么将内容切换到RTL模式 - 使用CSS direction属性或HTML dir属性 - 可以启用LTR语言的RTL滚动（但它是＆＃39; sa黑客，可能会变得混乱）。

来自规范：

11.1.1 Overflow: the overflow property

此属性指定块容器元素的内容   当它溢出元素框时被剪裁。

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

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

Answer 4

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

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

所以，如果容器中的内容大于宽度，则可以在容器上显示滚动。

这是你想要的吗？

Answer 5

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

对于浏览器窗口向左溢出的内容，是否可以显示滚动条？

5 个答案: