いろいろなwebページを見ている時に、面白い機能を実装しているページを見つけると、cssやjavascriptをどうやってコントロールしているかを、すぐに調べてしまう、ユゲタです。
今どきのインターネットブラウザは、javascriptコンソールが、ほぼ実装されているので、どんなブラウザであっても、WEBページの気になる箇所をすぐに調べることが可能です。
気になる機能を、すぐに調べてメモしておくと、いざ自分がwebサイト構築する時に非常に便利に役に立ちます。
さらに、自分で理解した事を、ブログやQiitaやNoteなどに書き溜めておくと、いいアウトプットもできるし、自分のスキルもアップする。
コレまじで、webエンジニアの人にはオススメなので、お試しください。
本日のIT謎掛け
「スクロールバー」と、かけまして・・・
「お酒の弱い人が宴会に参加した時」と、ときます。
そのココロは・・・
見えているツマミを、うまく利用します。
スクロールバーで気になったコト
インターネットのwebページは、基本的にスクロールをするページがほとんどですが、その時に、スクロールバーをうまくコントロールしないと、デザイン的にも、表示サイズ的にも、ダメな感じになる事もあるので、今回はそうしたスクロールバーを操作する方法をいくつか紹介したいと思います。
1. モーダルウィンドウなどの表示の時にスクロールを一時停止する方法
2. 見え隠れするページ全体のスクロールバーの表示を一定に保つ方法
3. スクロールされないスクロールバーを表示する方法
4. display:fixedを使う時のページスクロールバーの在り方
1. モーダルウィンドウなどの表示の時にスクロールを一時停止する方法
webページの機能で、ダイアログや、モーダルウィンドウ、ポップアップウィンドウなどを表示する場合に、表示しているウィンドウがスクロールに連動して動いてしまうというケースや、表示している追加ウィンドウが、座標固定で表示している場合でも、そのベース部分のページ本体がスクロールしてしまう状態のページをたまに見かけることがあります。
いざ、自分でも構築しようとすると、ベースページがスクロールして、なんだかかっこ悪い感じのページになってしまいがちです。
この症状を回避するには、スクロールをしている、BODYタグのCSSに"overflow:hidden;"を、javascriptなどで一時的にセットしてあげることで、スクロール途中の内容であっても、その場で止まった状態で、スクロールをしない状態を作れます。
モーダルウィンドウを閉じた時に、再び"overflow:auto;"や、"overflow:scroll;"にセットしてあげると、再びそのイチからスクロールできるようになります。
div.target-element{
overflow:hidden;
}
2. 見え隠れするページ全体のスクロールバーの表示を一定に保つ方法
上記のスクロール可否の引き換えを行う場合に、スマホブラウザで見ている場合は、スクロールバーの表示でスペース確保されないので気が付かないのですが、PCブラウザで閲覧している場合は、そのブラウザの設定にもよりますが、デフォルトでほぼ全てのブラウザでスクロールバーが存在感高めに表示されてしまいます。
そして、cssの"overflow"でscrollとhiddenと値を切り替えると、そのスクロールバーが見え隠れしてしまいます。
単純に見え隠れするだけならいんですが、その場合にページ内のサイズや座標などが切り替わってしまうという少し違和感のある状態になってしまいます。
これは、デフォルト状態の"overflow:auto;"の場合に、ページ表示エリアがブラウザの表示部分に収まっていれば、スクロールバーを表示されませんが、ページからはみ出す場合に、スクロールバーが表示するので、項目が増えていくようなページで、いきなりスクロールバーが表示される現象を見たことがある人も多いと思います。
これを回避する方法は、"overflow:auto;"を使わずに、"overflow:scroll;"を使うことで解決できます。
body{
overflow:auto;
}
/* 以下のように変更 */
body{
overslow:scroll;
}
3. スクロールされないスクロールバーを表示する方法
スクロールバーの見え隠れは、ページがガタついて見えるので、こうしたお作法はちょっとした表示安定化テクニックです。
さらなる手にクックですが、scrollがページ全体でBODYタグで発生する場合、全項目で"overflow:hidden;"と書くことでスクロールストップさせることができると説明したので、BODYに対してはこの方法を使うことができません。
その場合の対応策として、HTMLタグに"overflow:scroll;"をセットすると、スクロールされないスクロールバーが表示できます。
BODYタグがscrollしている状態または、hiddenされている状態の場合、HTMLタグは、はみ出した要素が存在しない状態になるため、スクロールしないスクロールバーが表示されるという仕組みになっています。
原理を考えると、難しく聞こえるかもしれませんが、BODYタグのスクロールを止める時は、HTMLタグのスクロール表示をすると、理解すればいいでしょう。
html{
overflow:hidden;
}
body{
overflow:scroll;
}
html[data-hover="1"]{
overflow:scroll;
}
html[data-hover="1"] body{
overflow:hidden;
}
function scrollChange(){
var html = document.querySelector("html");
if(html.hasAttribute("data-scroll")==="1"){
html.removeAttribute("data-scroll");
}
else{
html.setAttribute("data-scroll","1");
}
}
4. display:fixedを使う時のページスクロールバーの在り方
ページ内のヘッダメニューを表示する場合に、ページ上部固定にするために、"display:fixed;"機能を使うことがありますが、overflowの設定で、スクロールバーの表示順番が変更される事をGoogleChromeで確認しました。
この場合の条件は、ヘッダメニューに"display:fixed;"が使われていて、bodyタグまたはそれ以下の要素に、"overflow:scroll;"（またはauto）が摘要されている場合です。
- html{overflow:hidden;}になっている場合
- html{overflow:scroll;}に変更
WEBサイト作成時にスクロールで迷ったら、参考にしてくださいませ。
