Edit

Page

Page title:

Page body:

* [CODE(CSS)@en['overflow']] 特性 (CSS)

[1] [WEAK[2003-02-12 15:21]] ''[[名無しさん]]'': [[Mozilla]] の今の実装の scroll bar はどうも不安定。 [CODE(CSS)[overflow:scroll]] や [[textarea]] 要素によってでてくる scroll bar はスタイル指定の相性?できえがち。

[2]
[CITE[overflow プロパティは擬似フレームも作成できる]] <http://web.archive.org/web/20040221221340/kobit.info/tips/overflow.html>

[3]
[SAMP(CSS)[overflow: -moz-hidden-unscrollable;]]

[4]
[CITE[overflowの解釈、間違ってませんか? - WebStudio]] <http://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2005092101>
([[名無しさん]] [WEAK[2005-09-21 03:23:30 +00:00]])

[5]
[CITE[Bug 6976 - Horizontal scrollbar is missing. {was: "create scrollbar for / allow scrolling to overflow top (above) / left of container (Left side of the page is cut)"}]] <https://bugzilla.mozilla.org/show_bug.cgi?id=6976>
([[名無しさん]] [WEAK[2005-12-18 23:54:22 +00:00]])

[7]
[CODE(CSS example)@en[overflow: [[-webkit-marquee]]]]

[15]
[CITE[Operaのバグ発見 二つ目:メモランダム]] ([CODE[2007-08-04 03:44:15 +09:00]] 版) <http://mynotes.jp/blog/2007/07/opera_css_bug2>
([[名無しさん]])

[16]
[CITE[IT戦記 - body の overflow: hidden が変]] ([CODE[2007-08-18 12:50:19 +09:00]] 版) <http://d.hatena.ne.jp/amachang/20070802/1186031892>
([[名無しさん]] [WEAK[2007-08-18 07:31:33 +00:00]])

[6]
[[WinIE 6]] における [CODE(CSS)@en[[[overflow]]]],
[CODE(CSS)@en[[[overflow-x]]]], [CODE(CSS)@en[[[overflow-y]]]]
は、 [[CSSOM]] や [CODE(DOMa)@en[[[cssText]]]] 的には、
無関係の[[特性]]として扱われているようです。

[8]
[[Firefox]] 2 における [CODE(CSS)@en[[[overflow]]]] は、
[CODE(CSS)@en[[[overflow-x]]]] と [CODE(CSS)@en[[[overflow-y]]]]
の [[shorthand]] として扱われているようです。

;;
[9]
[[Opera]] 9 は [CODE(CSS)@en[[[overflow-x]]]] と 
[CODE(CSS)@en[[[overflow-y]]]] を実装していません。

* [CODE(XMLe)@en[math]] 要素 [CODE(XMLa)@en[overflow]] 属性 (MathML)

[20] [[MathML]] の [CODE(XMLe)@en[[[math]]]] [[要素]]の [DFN[[CODE(XMLa)@en[[[overflow]]]] [[属性]]]]は、
[[数式]]が[[幅]]に対して長すぎるときに[RUBYB[好ましい]@en[preferred]]取扱いを指定します。
[SRC[>>21]]

** 仕様書

- [21] [CITE[MathML Fundamentals]] ([TIME[2010-10-21 05:51:46 +09:00]] 版) <http://www.w3.org/TR/2010/REC-MathML3-20101021/chapter2.html#interf.toplevel.atts>

** 属性値

*** データ型

[22] [[属性値]]には次のものがあります [SRC[>>21]]。
- [CODE(XML)@en[[[linebreak]]]]
- [CODE(XML)@en[[[scroll]]]]
- [CODE(XML)@en[[[elide]]]]
- [CODE(XML)@en[[[truncate]]]]
- [CODE(XML)@en[[[scale]]]]

*** 既定値

[23] この属性の[[既定値]]は [CODE(XML)@en[[[linebreak]]]] です [SRC[>>21]]。

** 処理モデル

[24] 「[RUBYB[好ましい]@en[preferred]]」、「[RUBYB[提案する]@en[suggest]]」という語が仕様書上使われていて
[SRC[>>21]]、この[[属性]]の値に従うかどうかは[[レンダリング器]]に委ねられているようです。

** 関連

[25] [[CSS]] の [CODE(CSS)@en['[[overflow]]']] [[特性]]と名前や意味は似ていますが、
実際には違いが多いです。例えば [[MathML]] の [CODE(XML)@en[[[scroll]]]] は [[CSS]]
における [CODE(CSS)@en['[[auto]]']] に近い意味です。

* Viewport のスクロールバー

[17] [CODE(HTMLe)@en[[[html]]]] [[要素]]や [CODE(HTMLe)@en[[[body]]]]
[[要素]]に [CODE(CSS)@en[[[overflow]]: [[scroll]]]] や
[CODE(CSS)@en[[[width]]]] や [CODE(CSS)@en[[[height]]]] を指定してみました。

;; <http://suika.fam.cx/~wakaba/-temp/test/css/box/mode/>
の body-body-scroll、html-body-scroll、html-html-scroll、html-html-body-scroll。

- [[Firefox3]]
-- モードによる違いなし。
-- [CODE(HTMLe)@en[[[html]]]] と [CODE(HTMLe)@en[[[body]]]] の外側の方の [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に適用される。
-- [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に反映される場合、[[要素]]の[[箱]]は
[CODE(CSS)@en[[[visible]]]] 扱い ([[内容]]がはみ出る)。
-- [CODE(CSS)@en[[[width]]]]、[CODE(CSS)@en[[[height]]]] は[[要素]]の[[箱]]に反映される。
-- 両方共 [CODE(CSS)@en[[[overflow]]]] を指定すれば
[CODE(HTMLe)@en[[[body]]]] の[[箱]]にも[[スクロールバー]]が出る。
- [[Safari3]]
-- モードによる違いなし。
-- [CODE(HTMLe)@en[[[html]]]] と [CODE(HTMLe)@en[[[body]]]] の外側の方の [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に適用される。
-- [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に反映される場合、[[要素]]の[[箱]]は
[CODE(CSS)@en[[[visible]]]] 扱い ([[内容]]がはみ出る)。
-- [CODE(CSS)@en[[[width]]]]、[CODE(CSS)@en[[[height]]]] は[[要素]]の[[箱]]に反映される。
-- 両方共 [CODE(CSS)@en[[[overflow]]]] を指定しても
[CODE(HTMLe)@en[[[body]]]] の[[箱]]にも[[スクロールバー]]は出ない
([[内容]]がはみ出る)。
- [[Opera9]]
-- [[奇癖モード]]では [CODE(CSS)@en[[[height]]]] を指定しても[[内容]]に合わせて伸びる。
-- [CODE(HTMLe)@en[[[html]]]] と [CODE(HTMLe)@en[[[body]]]] の外側の方の [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に適用される。
-- [CODE(CSS)@en[[[overflow]]]] が [[viewport]] に反映される場合、[[要素]]の[[箱]]は
[CODE(CSS)@en[[[visible]]]] 扱い ([[内容]]がはみ出る)。
-- [CODE(CSS)@en[[[width]]]]、[CODE(CSS)@en[[[height]]]] は原則として[[要素]]の[[箱]]に反映される。
-- 両方共 [CODE(CSS)@en[[[overflow]]]] を指定すれば
[CODE(HTMLe)@en[[[body]]]] の[[箱]]にも[[スクロールバー]]が出る。
- [[WinIE7]]
-- [CODE(HTMLe)@en[[[body]]]] に [CODE(CSS)@en[[[overflow]]]]
を指定すると、
--- [[無奇癖モード]]: [[要素]]の[[箱]]に[[スクロールバー]]が出る。
[CODE(HTMLe)@en[[[body]]]] の [CODE(CSS)@en[[[width]]]]、
[CODE(CSS)@en[[[height]]]] は[[箱]]に適用される。
--- [[奇癖モード]]: [CODE(CSS)@en[[[overflow]]]] は [[viewport]] に適用される。
[CODE(HTMLe)@en[[[body]]]] の [CODE(CSS)@en[[[width]]]]、
[CODE(CSS)@en[[[height]]]] は無視される。
-- [CODE(HTMLe)@en[[[html]]]] に [CODE(CSS)@en[[[overflow]]]]
を指定すると、
--- [[無奇癖モード]]: [CODE(CSS)@en[[[overflow]]]] は [[viewport]] に適用される。
[CODE(HTMLe)@en[[[html]]]] の [CODE(CSS)@en[[[width]]]]、
[CODE(CSS)@en[[[height]]]] は[[箱]]に適用されるが、どちらも[[内容]]に応じて伸びる。
--- [[奇癖モード]]: [CODE(HTMLe)@en[[[html]]]] の [CODE(CSS)@en[[[overflow]]]]、
[CODE(CSS)@en[[[width]]]]、
[CODE(CSS)@en[[[height]]]] は無視される。

[18] [CITE[IlayerOverflowAttribute - doctype - The ilayer overflow attribute - Project Hosting on Google Code]]
([TIME[2010-03-20 19:47:21 +09:00]] 版)
<http://code.google.com/p/doctype/wiki/IlayerOverflowAttribute>

[19] [CITE[Layer]]
([TIME[2005-04-03 06:20:42 +09:00]] 版)
<http://www.blooberry.com/indexdot/html/tagpages/l/layer.htm>

[26] [CITE@en[Tantek-Mozilla-projects - MozillaWiki]]
( ([TIME[2011-01-15 07:24:20 +09:00]] 版))
<https://wiki.mozilla.org/Tantek-Mozilla-projects#remaining_tasks_2>

[27] [CITE@en[CSS3 module: Basic User Interface]]
( ([[Tantek Çelik]] 著, [TIME[2002-08-03 07:13:43 +09:00]] 版))
<http://www.w3.org/TR/2002/WD-css3-ui-20020802/#overflow-props>

[28] [CITE@ja[floatを解除する方法のまとめ: 小粋空間]]
( ([TIME[2013-03-28 02:27:25 +09:00]] 版))
<http://www.koikikukan.com/archives/2013/03/28-005555.php>

[29] [CITE@en[CSS Overflow Module Level 3]]
( ([TIME[2013-04-18 17:20:51 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/>

[30] [CITE@ja[overflowではみ出た要素がクリッカブルになってしまうAndroid 4標準ブラウザのバグ - 下林明正のブログ]]
( ([TIME[2013-06-07 09:04:43 +09:00]] 版))
<http://shimobayashi.hatenablog.com/entry/2013/06/07/overflow%E3%81%A7%E3%81%AF%E3%81%BF%E5%87%BA%E3%81%9F%E8%A6%81%E7%B4%A0%E3%81%8C%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AB%E3%83%96%E3%83%AB%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86>

[31] [CITE[CSS basic box model]]
( ([TIME[2013-10-12 15:40:00 +09:00]] 版))
<http://dev.w3.org/csswg/css-box/#overflow0>

[32] [CITE@en[CSS Overflow Module Level 3]]
( ([TIME[2013-06-03 18:06:00 +09:00]] 版))
<http://dev.w3.org/csswg/css-overflow/>

[33] [CITE[HTML5 - 親要素からはみ出した子要素は、右側だけがスクロール表示される - Qiita ''''''[''''''キータ'''''']'''''']]
( ([TIME[2013-11-19 01:43:09 +09:00]] 版))
<http://qiita.com/HieroglypH/items/572e4cbd51d4c40d791e>

[34] [CITE@en[Web Applications 1.0 r8363     Make the viewport around a <dialog> always scrollable. Don't ask me what happens if an unscrollable viewport is scrolled while a dialog is up and then the dialog goes away, that isn't clear at this time. If you think we should scroll back to the previous position, or force a previous dialog to be visible, or some such, file a bug with details, please. Thanks...]]
( ([TIME[2013-12-18 03:08:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8362&to=8363>

[FIG(quote)[
[FIGCAPTION[
[10] [CITE[Opera Reader: Paging the Web]]
([TIME[2015-07-28 11:57:17 +09:00]] 版)
<http://people.opera.com/howcome/2011/reader/#overflow>
]FIGCAPTION]

> The four custom values that Opera Reader provides for overflow are:
> -o-paged-x
> -o-paged-y
> -o-paged-x-controls
> -o-paged-y-controls

]FIG]

[11] [CITE@en['''['''css-overflow''']''' upgrade to MUST requirements about overflow:hidden]]
([[frivoal]]著, [TIME[2016-11-03 15:42:32 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/af1704db040090f3fea9a11c34ffc4bd06fb2ebf>

[12] [CITE@en['''['''CSS22''']''' Change to baseline of 'inline-block' in the presence of 'over…]]
([[bert-github]]著, [TIME[2016-12-14 23:55:11 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/de9746dc5831558749d25bc054b19cde5ea4f554>

[13] [CITE@en['''['''CSS22''']''' Change to baseline of 'inline-block' in the presence of 'over…]]
([[bert-github]]著, [TIME[2016-12-14 23:55:22 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/0f7ad2a54d5ec450e226d6e88968d5e8a108ed5d>

[14] [CITE@en['''['''css-values-3''']''' Remove consideration of scrollbars in viewport unit co…]]
([[fantasai]]著, [TIME[2017-09-20 06:21:45 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/c1c2e82ca98a5a88f811e9d165757136d33f9dd4>

[35] [CITE@en[Update CSS Overflow reference to version we need]]
([[sideshowbarker]]著, [TIME[2017-10-01 11:21:34 +09:00]])
<https://github.com/whatwg/html/commit/f3d90c5d3ee9750852d6c74cad90c8dba3396a5d>

[36] [CITE@en[Update CSS Overflow reference to version we need by sideshowbarker · Pull Request #3075 · whatwg/html]]
([TIME[2017-10-03 12:26:28 +09:00]])
<https://github.com/whatwg/html/pull/3075>

[37] [CITE@en['''['''csswg''']''' overflow-3 and overflow-4 and unleveled URLs]]
([[Alan Stearns]]著, [TIME[2017-10-05 09:30:36 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2017Oct/0008.html>

[38] [CITE@en['''['''css-overflow-3''']''' Clarify Overflow Value Propagation]]
([[frivoal]]著, [TIME[2018-01-04 08:34:44 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/967c9f0c15d24e47d22da70b131671d44272c4c4>

[39] [CITE@en['''['''css-overflow''']''' body overflow propagation is less defined than it was in CSS 2.1 · Issue #1905 · w3c/csswg-drafts]]
([TIME[2018-01-04 15:17:33 +09:00]])
<https://github.com/w3c/csswg-drafts/issues/1905>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)