<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><section><h1>位置</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="12" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[12]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">垂直スクロールバー</anchor>は、 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ltr</anchor> では<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">右側</anchor>、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">rtl</anchor> では<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">左側</anchor>に表示するのが普通です。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="13" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[13]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">左利き</anchor>の人は <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ltr</anchor> でも<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">左側</anchor>に表示したいことがあるようです。
しかしそのような実装は少ないようです。</p><comment-p xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">左利き</anchor>も参照。</comment-p></section><section><h1>スクロール・バー (CSS)</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end>
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクロール・バー</anchor>が<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要素</anchor>の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">箱</anchor>の端に配置される場合、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">境界内辺</anchor>と<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">詰め外辺</anchor>の間に入れる<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:"><strong xmlns="http://www.w3.org/1999/xhtml">べきです</strong></anchor>。
この空間は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">レンダリング</anchor>上の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">次元</anchor>の計算に影響します。
<src xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS 2.1</anchor> 11.1.1</src></p><section><h1>仕様書</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end>
<cite xml:lang="en">Visual effects</cite> (<time>2007-07-20 04:27:43 +09:00</time> 版) <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://www.w3.org/TR/2007/CR-CSS21-20070719/visufx.html#overflow">http://www.w3.org/TR/2007/CR-CSS21-20070719/visufx.html#overflow</anchor-external></p></section></section><section><h1><code class="XML" xml:lang="en">scroll</code> (MathML <code class="XMLe" xml:lang="en">math</code> 要素 <code class="XMLa" xml:lang="en">overflow</code> 属性)</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[5]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">MathML</anchor> の <code class="XMLe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">math</anchor></code> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要素</anchor>の <code class="XMLa" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">overflow</anchor></code>
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">属性</anchor>の値「<dfn><code class="XML" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">scroll</anchor></code></dfn>」は、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">数式</anchor>が収まりきらないときに<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクロール・バー</anchor>によって<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクロール</anchor>可能な形で一部を隠して<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">レンダリング</anchor>するべきことを表します。</p><section><h1>仕様書</h1><ul><li><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[6]</anchor-end> <cite>MathML Fundamentals</cite> (<time>2010-10-21 05:51:46 +09:00</time> 版) <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://www.w3.org/TR/2010/REC-MathML3-20101021/chapter2.html#interf.toplevel.atts">http://www.w3.org/TR/2010/REC-MathML3-20101021/chapter2.html#interf.toplevel.atts</anchor-external></li></ul></section><section><h1>レンダリング</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[7]</anchor-end> <code class="XML" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">scroll</anchor></code> が指定された場合には、<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">数式</anchor>全体が与えられた領域に収まらなければ、
完全な表示に対する一部分の <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">viewport</anchor> として<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">レンダリング</anchor>を行い、
必要に応じて<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">垂直スクロール・バー</anchor>、<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">水平スクロール・バー</anchor>を表示するのがよいとされています
<src xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:"><anchor-internal xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">&gt;&gt;6</anchor-internal></src>。</p></section><section><h1>関連</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="8" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[8]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> における <code class="CSS" xml:lang="en">'<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">overflow</anchor>: <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">scroll</anchor>'</code> は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクロール・バー</anchor>を常に表示しますが、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">MathML</anchor> ではそうではなく、むしろ <code class="CSS" xml:lang="en">'<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">overflow</anchor>: <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">auto</anchor>'</code> 
の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">レンダリング</anchor>となります。</p></section></section><section><h1>利用者体験</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="15" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[15]</anchor-end> 標準状態では <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Webブラウザー</anchor>は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクロールバー</anchor>をその<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">プラットフォーム</anchor>の通常の方法で<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクロールバー</anchor>を<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">レンダリング</anchor>します。
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">著者</anchor>は、これをむやみに変更するべきではありません。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="16" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[16]</anchor-end> 例えば一部では<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクロールバー</anchor>を細く表示させるのが流行っていますが、
標準状態では接続されている<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">指示装置</anchor>の特性や<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">利用者</anchor>の好みに応じて最も操作しやすい幅に調整されているはずですから、
不適切です。<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">著者</anchor>の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">プラットフォーム</anchor>の慣習や見た目上の好みをすべての<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">利用者</anchor>に押し付けるべきではありません。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="17" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[17]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクロールバー</anchor>の配色をそのページの見た目に合わせて変更することもありますが、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">背景</anchor>に溶け込みすぎてわかりづらい配色など、利便性を低下させるような変更は避けるべきです。</p></section><section><h1>メモ</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="9" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[9]</anchor-end> <cite>IRC logs: freenode / #whatwg / 20110815</cite>
( (<time>2011-08-27 15:22:54 +09:00</time> 版))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://krijnhoetmer.nl/irc-logs/whatwg/20110815">http://krijnhoetmer.nl/irc-logs/whatwg/20110815</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="10" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[10]</anchor-end> <cite xml:lang="ja">Twitter / ilistes: Scrollbars through history ...</cite>
( (<time>2012-10-05 00:56:41 +09:00</time> 版))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://twitter.com/ilistes/status/250658949467099136">https://twitter.com/ilistes/status/250658949467099136</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="11" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[11]</anchor-end> <cite><strong></strong>[<strong></strong>whatwg<strong></strong>]<strong></strong> Should scrollbars move focus?</cite>
( (<time>2012-10-23 01:32:26 +09:00</time> 版))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-October/037676.html">http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-October/037676.html</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="14" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[14]</anchor-end> <cite>Chrome 32 スクロールの問題 まとめ - Google プロダクト フォーラム</cite>
( (<time>2014-01-27 11:25:57 +09:00</time> 版))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://productforums.google.com/forum/#!topic/chrome-ja/I05Ixft9UF8%5B1-25-false%5D">http://productforums.google.com/forum/#!topic/chrome-ja/I05Ixft9UF8%5B1-25-false%5D</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end>
<cite>イヌでもわかるJavaScript講座</cite> (<code>2002-11-14 21:24:42 +09:00</code> 版) <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://www.red.oit-net.jp/tatsuya/java/scroll0b.htm">http://www.red.oit-net.jp/tatsuya/java/scroll0b.htm</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end> 
近づけないと出てこないスクロールバー、
文字サイズの半分くらいの細いスクロールバーはまじでやめてほしい。
デザイナーの自己満足で使いづらい糞デザインの教科書に載せてほしいくらい</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="18" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[18]</anchor-end> 
そういうデザインするやつは <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">UX</anchor> がうんたらかんたらとか二度と発言できなくしてほしい</p></section></body></html>