スクロールしても左に動かないのはなぜでしょうか

Question

 


      <div class="box">
        <div class="a">
          a
        </div>
        <div class="b">b</div>
      </div>

.box {
  background: red;
  width: 100%;
  height: 200px;
  position: absolute;
  color: #fff
}

.a {
  background: #333;
  width: 100%;
  margin-left: -100px
}

.b {
  background: #999;
  width: 100%;
  margin-left: 100px
}

スクロールして左に動かないのに右には動きます。
boxaの文字は左にずれたままずっと見れないのでしょうか。

Answer 1

かつて、 Netscape や Internet Explorer などの古いブラウザが block-start, inline-start にあたる箇所を独自仕様により切り取っていました。これに端を発して、切り取られる領域へ要素を移動させることで、「視覚系ブラウザでは確認出来ず、スクリーンリーダーや検索エンジンにのみ認識可能なテキストを作る手法」が横行しました。

そのような状況で両方向へのスクロールを許可した場合、この手法を用いている多くの Web サイトのレイアウトに大きな影響を与えてしまいます。そこで互換性を考慮し、 CSS Overflow Module Level 3 では以下のようにスクロールコンテナの block-start, inline-start にあたる箇所のオーバーフローした領域を切り取らなければならないと決められました。簡単にいえば、 Lhankor_Mhy さんの回答にあるとおり、「実装上の問題が習慣化し事実上の仕様と化している」ということになります。

§ 3.3. Scrolling Origin, Direction, and Restriction

The initial scroll position, that is, the initial position of the box’s scrollable overflow region with respect to its border box, prior to any user or programmatic scrolling that changes it, is dependent on the box’s writing mode, and is by default the block-start/inline-start edge of the box’s padding edge.

Due to Web-compatibility constraints, UAs must clip the scrollable overflow region of scroll containers on the block-start and inline-start sides of the box.

Comments

[退会済みユーザー]

丁寧なご回答ありがとうございます。

Answer 2

確証はないのですが。

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

（略）

• A descendant box has negative margins, causing it to be positioned partly outside the box.

Visual effects

勝手訳：一般にボックスの内容はボックス辺に収まっています。しかし一定の状況で、オーバーフロー、つまりボックスの外側に内容物の一部または全体があふれることがあります。たとえば:
（略）

• ネガティブマージンを持つ子孫要素が、その一部をボックスの横に置く。

---

上記のように、CSS仕様の上では、ネガティブマージンに対してもスクロールさせて良いように思えます。

しかし、実際にはネガティブマージンに対して左スクロールを生じさせるブラウザを見たことがありません。
なので、実装上の問題が習慣化し事実上の仕様と化しているのではないかと思います。

---

一方で、このような左右非対称は、アラビア語などのRTLに対して（あるいは日本語のようなTB-RLにも）不利益があるのでは、とも思いますので、いずれ修正がなされるかもしれませんね。

Answer 3

そういう仕様のものです。