Metro IE10のスクロールバー

Internet Explorer 10のMetro版はデフォルトではスクロールバーが表示されないが、ポインターを動かすと上下に矢印のあるいわゆる「スクロールバー」が表示される。このスクロールバーはコンテンツにかぶさる形なのでviewportには影響を与えない。また表示されていない状態でポインターを動かさずにスクロールした場合は、OS Xっぽいスライダーのみの細いスクロールバーが表示される。こちらもviewportに影響は与えない。

ポインターを動かすとスクロールバーがかぶさる形で表示されるということは、「画面端にほぼクリックすることが出来ないエリアができる」という事なので、ある程度この事を考慮してレイアウトしないとならない。例えばよくある「ページ先頭に戻る」を実現するボタン的なものはページの右下に置くことが多いが、完全に隅に置くとクリックしづらくなる。このスクロールバーの幅は17pxの様なので、少なくとも半分以上はクリックできるように大きさや位置を工夫する必要がある。

タッチの場合はポインターの移動ということがそもそも起きないので、タッチできないエリアができるとかはないと思う。実際にタッチ・デバイスで実際に試したわけじゃないので勘だけども。こういうところでもMetro IE10はタッチに最適化されてるんだなーと改めて思った。タッチ・デバイスだと矢印付きのスクロールバーをそもそも見ることがないのかもしれない。

スクロールしただけの時に出る細いスライダーはつかめない。つかもうとポインターを動かすと矢印付きの太いスクロールバーになるから。単なるスクロール位置のインジケーターなのでこれについてはとくに何も考える必要はない。どうでも良さそうだけどこの細いスライダーはサイズが5pxで端から5pxのところに表示される。


スクロールバー以外にも戻る/進むボタンが画面の左右端中央に結構大きめにコンテンツにかぶさって表示されることとか、Windows 8のホット・コーナーのこととかもあるので端に寄せて何かを置くとアレな事になりそう。あくまでもMetro IE10をマウスやトラックボールで操作する場合に限った話だけど。