6

I created this code. This overflows to the right, which causes a scrollbar to appear:

.content {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  top: 50px;
}
<div class="content">
  CONTENT
</div>

However, this code, which extends to the left, did not generate scrollbars. I interpreted from the W3C specification that this would create scrollbars in both directions.

The overflow-x property specifies the handling of overflow in the horizontal direction (i.e., overflow from the left and right sides of the box), and the overflow-y property specifies the handling of overflow in the vertical direction (i.e., overflow from the top and bottom sides of the box).

https://www.w3.org/TR/css-overflow-3/

.content {
  position: absolute;
  height: 100px;
  width: 100px;
  left: -50px;
  top: 50px;
}
<div class="content">
  CONTENT
</div>

Does the W3C specification explain why scrollbars are not generated when projecting to the left?

stackdestroy
  • 65
  • 4
  • if you change the direction you will get a scroll bar on the left but scroll bar are only generated in one direction, either left or right, never both (not able to find where it's defined to be like that ..) – Temani Afif Feb 08 '20 at 19:06
  • @TemaniAfif It practically works as a scroll bar to the left, but strictly a scroll bar to the right. I need to be able to overflow in both directions and want to know why this is not the default behavior. – stackdestroy Feb 08 '20 at 19:19
  • no, you have no chance to overflow in both direction and be able to scroll in both direction. The scroll is generated considering the direction/writing-mode of your document. If it's from left to right then any left overflow is *ignored* and you can no more reach it (I am trying to find where this is explained ..) – Temani Afif Feb 08 '20 at 19:21
  • 1
    Related: https://stackoverflow.com/questions/41301628/horizontal-scrollbar-appears-with-overflow-content-on-right-but-not-on-left and https://stackoverflow.com/questions/38698797/can-a-scroll-bar-appear-for-content-overflowing-the-browser-window-to-the-left – j08691 Feb 08 '20 at 19:24

1 Answers1

4

It's this paragraph from section 3.3. Scrolling Origin, Direction, and Restriction

Due to Web-compatibility constraints (caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output), UAs must clip the scrollable overflow region of scroll containers on the block-start and inline-start sides of the box (thereby behaving as if they had no scrollable overflow on that side).

In other words, the overflow notionally happens on both sides. But it is clipped.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • Thanks for sharing the specs (and sorry for the delay in replying). / What is the "legacy bugs" referred to in the specification? / I identified the commit to which this sentence was added and tried to find the bug in question from that date and time, but couldn't find it. [commit](https://github.com/w3c/csswg-drafts/commit/76c6654d2c9c264f256284a79950250e5543c1d1#diff-1c253a97b5f0e47e09f0b4895f9c54dcR447) – stackdestroy Mar 26 '20 at 23:44
  • @stackdestroy - It simply means that browsers, probably Netscape Navigator and IE, clipped the scrollable region to the positive x and y section of the canvas, even though the CSS spec said they shouldn't. This in turn would have been the result of behaviour of scrolling before CSS was invented, when putting boxes in the negative regions would have been impossible, so there was no need to implement the capability to do it. – Alohci Mar 27 '20 at 00:38