Generate scroll bar for overflow to the left

Question

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?

score 8 · Answer 1 · edited Aug 10 '16 at 10:33

as you have a very specific example will something like this work for you? I did have to use a little jquery (you can do it with javascript). If you don't have any other content that will be affected you could place a rtl on the HTML tag and keep your absolute position on the element.

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>

Good stuff - thanks. It seems it's necessary to set `direction` at `body` level or above - I'd only tried setting it at the `div` level before. — Peter Stock, Aug 08 '16 at 09:16

score 5 · Accepted Answer · edited Aug 10 '16 at 08:34

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:

I know these snippet things are usually good to try things out with a single click, but that's not possible here - for anyone wanting to try this out, go to my initial answer, which is more cut/paste-to-file friendly, not this edit. — Peter Stock, Aug 11 '16 at 06:44

Michael Benjamin · Answer 3 · 2016-08-08T21:33:31.580

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

No. Unless you hack it.

Think about the flow of content.

In left-to-right language mode, content overflows to the right. It does not overflow to the left.

Hence, the overflow property doesn't apply to the left because there is no overflow.

In right-to-left languages, the reverse is true.

That's why switching your content to RTL mode – either with the CSS direction property or the HTML dir attribute – can enable RTL scroll in LTR languages (but it's a hack and can get messy).

From the spec:

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.

Again, in LTR reading/writing mode, content does not overflow to the left.

It's common to invoke the overflow property for scrolling to the left of the viewport, only because overflow is commonly associated with scroll bars. But in reality the request is for specialized scrolling, having nothing to do with overflow.

score -1 · Answer 4 · answered Aug 01 '16 at 12:29

-1

With css you cant tell when some content is overflowing the screen or the browser. You have to make the container to NOT exceed that width and make HIM (the container) show his scroll when overflowed. For example a div:

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

So mi point is you can show scroll on container if content in it is bigger then its width.

Is this what you want?

answered Aug 01 '16 at 12:29

TreantBG

1,192
6
25
44

Sadly, no, I don't want to set a width on div.b - I want it to take up whatever space it needs. Only scroll (with whole doc) if the window is too small to fit it. – Peter Stock Aug 01 '16 at 12:45
You can use a percentage instead of a fixed width, i.e. `width: 100%` – Caleb Anthony Aug 05 '16 at 18:34

score -2 · Answer 5 · answered Aug 01 '16 at 12:33

-2

use container with div, so that it does not overflow, and you may know what size the container is so that next one can be adjusted accordingly.

answered Aug 01 '16 at 12:33

Osama

1
2

Generate scroll bar for overflow to the left

5 Answers5

Linked

Related