* [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 プロパティは擬似フレームも作成できる]] [3] [SAMP(CSS)[overflow: -moz-hidden-unscrollable;]] [4] [CITE[overflowの解釈、間違ってませんか? - WebStudio]] ([[名無しさん]] [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)"}]] ([[名無しさん]] [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]] 版) ([[名無しさん]]) [16] [CITE[IT戦記 - body の overflow: hidden が変]] ([CODE[2007-08-18 12:50:19 +09:00]] 版) ([[名無しさん]] [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]] 版) ** 属性値 *** データ型 [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]]]] を指定してみました。 ;; の 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]] 版) [19] [CITE[Layer]] ([TIME[2005-04-03 06:20:42 +09:00]] 版) [26] [CITE@en[Tantek-Mozilla-projects - MozillaWiki]] ( ([TIME[2011-01-15 07:24:20 +09:00]] 版)) [27] [CITE@en[CSS3 module: Basic User Interface]] ( ([[Tantek Çelik]] 著, [TIME[2002-08-03 07:13:43 +09:00]] 版)) [28] [CITE@ja[floatを解除する方法のまとめ: 小粋空間]] ( ([TIME[2013-03-28 02:27:25 +09:00]] 版)) [29] [CITE@en[CSS Overflow Module Level 3]] ( ([TIME[2013-04-18 17:20:51 +09:00]] 版)) [30] [CITE@ja[overflowではみ出た要素がクリッカブルになってしまうAndroid 4標準ブラウザのバグ - 下林明正のブログ]] ( ([TIME[2013-06-07 09:04:43 +09:00]] 版)) [31] [CITE[CSS basic box model]] ( ([TIME[2013-10-12 15:40:00 +09:00]] 版)) [32] [CITE@en[CSS Overflow Module Level 3]] ( ([TIME[2013-06-03 18:06:00 +09:00]] 版)) [33] [CITE[HTML5 - 親要素からはみ出した子要素は、右側だけがスクロール表示される - Qiita ''''''[''''''キータ'''''']'''''']] ( ([TIME[2013-11-19 01:43:09 +09:00]] 版)) [34] [CITE@en[Web Applications 1.0 r8363 Make the viewport around a 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]] 版)) [FIG(quote)[ [FIGCAPTION[ [10] [CITE[Opera Reader: Paging the Web]] ([TIME[2015-07-28 11:57:17 +09:00]] 版) ]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]]) [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]]) [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]]) [14] [CITE@en['''['''css-values-3''']''' Remove consideration of scrollbars in viewport unit co…]] ([[fantasai]]著, [TIME[2017-09-20 06:21:45 +09:00]]) [35] [CITE@en[Update CSS Overflow reference to version we need]] ([[sideshowbarker]]著, [TIME[2017-10-01 11:21:34 +09:00]]) [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]]) [37] [CITE@en['''['''csswg''']''' overflow-3 and overflow-4 and unleveled URLs]] ([[Alan Stearns]]著, [TIME[2017-10-05 09:30:36 +09:00]]) [38] [CITE@en['''['''css-overflow-3''']''' Clarify Overflow Value Propagation]] ([[frivoal]]著, [TIME[2018-01-04 08:34:44 +09:00]]) [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]])