生成向左溢出的滚动条 [英] Generate scroll bar for overflow to the left

查看：33
本文介绍了生成向左溢出的滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这段代码使浏览器在内容大于窗口时有一个水平滚动条，向右溢出:

div.a {位置:相对；向左飘浮;背景颜色:红色；}div.b {位置:绝对；顶部:100%；左:100%；背景颜色:蓝色；空白:nowrap；}

Text1<div class="b">文字2文字2文字2文字2文字2文字2文字2文字2

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

div.a {位置:相对；浮动:对；背景颜色:红色；}div.b {位置:绝对；顶部:100%；正确:100%；背景颜色:蓝色；空白:nowrap；}

文本1<div class="b">文字2文字2文字2文字2文字2文字2文字2文字2

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

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

如果这种行为不能被 html/css 改变，那么浏览器选择做他们目前做的事情的原因是什么?有什么理由不能修复"它们吗?对于仅支持从右到左语言的网站(我认为它们希望能够使用这样的布局)，当前的行为是否也会有问题?

解决方案

因此，在正确的位置使用 dir 属性，您可以做我想做的事.但是你不能吃蛋糕 - 我希望能够向左滚动以查看向左溢出的内容，并且向右滚动以查看向右溢出的内容.不管有没有这个 dir hack，你仍然有一些不可见的内容.

没有dir hack，看不到Longtext2的全部

div.a{位置:相对；浮动:对；背景颜色:红色；}div.b{位置:绝对；顶部:100%；正确:100%；背景颜色:蓝色；}

<头><style type="text/css"></风格><身体><div>Start_Longtext1Longtext1Longtext1Longtext1Longtext1_End

<div class="a">文本1<div class="b">Start_Longtext2Longtext2Longtext2Longtext2Longtext2_End

</html>

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

div.a{位置:相对；浮动:对；背景颜色:红色；}div.b{位置:绝对；顶部:100%；正确:100%；背景颜色:蓝色；}

<头><style type="text/css"></风格><body dir="rtl"><div dir="ltr">Start_Longtext1Longtext1Longtext1Longtext1Longtext1_End

<div class="a" dir="ltr">文本1<div class="b">Start_Longtext2Longtext2Longtext2Longtext2Longtext2_End

</html>

因此，遗憾的是，目前似乎无法让当前的浏览器能够滚动查看两者(滚动条初始位置位于文档原点，对应于滑块位于中间的某个位置).在这个模型中:

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>

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?

Tested on FF 47, IE 11, Opera 38 - all do the same thing.

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?

解决方案

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.

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>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆