对于浏览器窗口向左溢出的内容,是否可以显示滚动条？
当内容大于窗口时,此代码使浏览器具有水平滚动条,溢出到右侧:
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>
我可以以某种方式更改此行为,如果内容大于窗口,则能够向左滚动,向左溢出？
在FF 47,IE 11,Opera 38上测试 - 都做同样的事情.
如果html/css无法更改此行为,浏览器选择执行目前的操作的原因是什么？有什么理由不能"固定"吗？对于仅适用于从右到左语言的网站,目前的行为是否也会出现问题？我认为这些网站可能会使用这样的布局？
因为你有一个非常具体的例子,这样的东西会为你工作吗？我确实必须使用一个小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>因此,dir在正确的位置使用属性,你可以做我想要的一半.但你不能吃蛋糕并且吃它 - 我希望能够向左滚动以查看溢出的内容,并向右滚动以查看内容溢出正确.无论有没有这种dir黑客,你仍然有一些不可见的内容.
没有dir黑客,看不到所有的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>
有了dirhack,看不到所有的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>
所以,遗憾的是,目前似乎无法让当前的浏览器能够滚动查看两者(滚动条在文档原点的初始位置,对应于滑块位于中间某处).就像在这个模型中:
| 归档时间： |
|
| 查看次数： |
588 次 |
| 最近记录： |