是否可以出现内容溢出浏览器窗口左侧的滚动条？ [英] Can a scroll bar appear for content overflowing the browser window to the left?
问题描述
此代码使浏览器有一个水平滚动条，当内容大于窗口，溢出到右侧：
This code makes the browser have a horizontal scroll bar when the content is bigger than the window, overflowing to the right:
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向右浮动，然后第二个位于左边，浏览器不会无法查看溢出的文本。
But if I make the first div float right and then second positioned left of it, the browser doesn't make a horizontal scroll bar, and the overflowing text can't be viewed.
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>
我可以改变这种行为，以便能够向左滚动，如果内容大于窗口，向左溢出？
Can I change this behaviour somehow, to be able to scroll left if the content is bigger than the window, overflowing to the left?
在FF 47，IE 11，Opera 38上测试 - 都做同样的事情。
Tested on FF 47, IE 11, Opera 38 - all do the same thing.
如果这种行为不能被html / css改变，浏览器选择做什么原因是什么呢？有什么理由为什么他们不能固定？现在的行为对于仅针对从右到左语言的网站来说也是有问题的，我假设这些网站可以使用这样的布局？
If this behaviour can't be changed by html/css, what is the reason browsers choose to do what they currently do? Is there any reason why they couldn't be 'fixed'? Wouldn't the current behaviour also be problematic for sites catering solely for right-to-left languages, which I assume would want to be able to use layouts like this?
推荐答案
所以，使用 dir 属性在正确的地方，你可以做一半我想要的。但你不能有你的蛋糕，吃它 - 我想能够向左滚动看到内容溢出左侧，也向右滚动看到内容溢出权利。有了或没有这个 dir hack，你仍然有一些不可见的内容。
So, using the dir attribute in the right places you can half-do what I wanted. But you can't have your cake and eat it - I wanted to be able to scroll left to see content overflowing left, and also scroll right to see content overflowing right. With or without this dir hack, you still have some unviewable content.
没有 dir hack，无法看到所有Longtext2
Without dir hack, can't see all of 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。
With dir hack, can't see all of 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>
所以，可悲的是，似乎目前不可能使当前浏览器能够滚动查看两者滚动条在文档原点的初始位置，对应于滑块在中间某处）。在此模型中：
So, sadly, it seems that is not currently possible to make current browsers be able to scroll to view both (with scroll bar initial position at document origin, corresponding to slider being somewhere in the middle). As in this mockup:
这篇关于是否可以出现内容溢出浏览器窗口左侧的滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
