人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

縦スクロールバーの謎(Chrome)

2017年 11月 24日
 「overflow」が変な扱われ方になった? 

ブログのHTML編集枠に下の枠内のHTMLを記述すると、「■■」のある文字列を折り返しをしない1行で、背景が灰色のブロック内に表示するという事になります。(実際のHTMLは改行無しの数珠繋がりです。

<div style="overflow: auto; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>

このHTMLで、囲みの<div>は400pxの幅で、それより幅の短い文字列ではスクロールバーが表示される事はないはずです。

■■■■■■■ これはサンプル ■■■■■■

ところが実際は縦スクロールバーが出る事があります。 もしChromeをお使いでしたら、ブラウザの拡大率を125%等の倍率にして、このページを見てください。
文字列をもっと長くしたものが下です。

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■■

横スクロールバーはHTMLの通りですが、今度は縦スクロールバーが出たり、出なかったり。 なんじゃこれは。


 ブラウザによる見え方の違い 

上の表示はブラウザによって異なる様です。「スクロールバーの表示の仕方」がブラウザによって異なる仕様なのは、昔から皆を悩ませて来た問題ですね。 今回はそれは別件なんですが、これを見ている人が何を言ってるのか判らなくならない様に、まずハードコピーで上の見え方を示すと。

縦スクロールバーの謎(Chrome)_b0174191_10231260.png
縦スクロールバーの謎(Chrome)_b0174191_10234880.png
縦スクロールバーの謎(Chrome)_b0174191_10241976.png
縦スクロールバーの謎(Chrome)_b0174191_10254699.png

マイクロソフトのEdgeは相変わらず独自路線でIEと同じ、スクロールバーを出してくれず折り返されます。 ChromeとFirefoxは同じ表示になりました。 で、今回の縦スクロールバーはChromeだけの問題の様です。



 異常表示はまばらに出る 

現象は、このコードを複数並べると気付き易いのですが、110%以上の拡大率で見ると、いくつか置きに縦スクロールバーが出たり出なかったりします。 ブロックは全く同じコードですが、拡大率により異常表示が出るブロックが変わります。 これは、編集画面上でもブログ誌面上でも同じです。

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

「overflow: auto;」の指定で、文字列が右端に達しておらず、また本来は縦スクロールバーは出ないはずです。 しかし、縦スクロールバーが出たり出なかったりするという事です。

横スクロールバーを意図的に表示させるこういったブロックは、コード掲載などで昔から利用して来ました。 ブロックの書き方を定型化して同じ形なのに、縦スクロールバーのこんな出方は気付かなかったのです。 最近にこの様なことが生じた様に思えますが、確証がありません。


〔追記〕
問題の切り分けのために、インラインの指定を部分的に外して行きました。

<div style="overflow: auto; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>


〔padding: 0 20px〕を削除

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■


〔background: #ddd〕を削除

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■


〔border: 1px solid #aaa〕を削除

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■


なんとなく予想していた「border」が関係しているらしい。 実際に私のページで生じている事は、こういう縦幅が極小のブロックではなく、縦に数十行以上のブロックでも、同様に不規則にスクロールバーが表示されてしまいます。

当然、「overflow-x:auto; overflow-y: hidden」等で逃げる事は出来そうですが、理屈の不明な表示の放置は、という気がします。 この定型でHTMLのインラインでブロックのスクロール表示の仕方を指定しているのは、スマホでのコード表記枠の見え方を考慮しているからです。 エキサイトの場合、スマホでの表示は、HTMLでスタイルを指定するインライン記述でしか修飾出来ないのです。 この様なブログシステムは多いのですが、スマホ向けのCSSデザインはブログシステム任せで、ユーザーが細かいアレンジや要望を盛り込む事は出来ないため、苦労します。


とりあえずの改善策で、「overflow-x:auto; overflow-y: hidden」としてみます。

<div style="overflow-x:auto; overflow-y: hidden; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>

上のコードのサンプル

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

■■■■■■■ これはサンプル ■■■■■■

400pxを越える長い内容の場合

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■

■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■

まあ、あたり前ですが、これで意図した通りの表示になる様です。

他の解決策を探して、「height」「line-height」「上下padding」など闇雲に試しましたがどうも妙薬は見つかりません。



by Ataron | 2017-11-24 02:13 | PC環境(ハード/ソフト) | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。