pagmoのオブジェクトが画面外にはみ出る

javascript

pagmoの新機能を実装していてちょっと考えたので主に自分用として書いておく。
(調べてもいいとこが出てこなかったため自分でやってみた)


javascriptでdomをいじってページ上に動かせるオブジェクトとかをおくと、
画面外にはみ出したときにスクロールバーが出てうざいってのがある。
たとえば、ページ上に動かせるウインドウをおきたいときとか、
ウインドウを画面の左はじのほうに持っていくと下に横スクロールバーが出るとか。
ページ自体のコードも自分がいじれるならいくらでもやりようがあるだろうけど、
人のページ上にプラグインとして何かオブジェクトをおきたい場合(pagmoみたいに)、
ページの構造自体はいじりたくないし、
結局ユーザー側のブラウザの大きさとか画面の大きさとかに左右されてしまうので
javascriptのUIというのは作りにくいんじゃないか。


オブジェクトの大きさがちゃんとわかっているものとか、
もしくははかれるものならwindowの大きさから計算すればすむはなしだが、
そういう事ができない場合(内容量によって大きさがかわる場合とか)、ちょっと厄介だ。


ページ上の要素の位置や大きさもはかる事ができるらしいが、なかなか面倒みたい。

上記のエントリが深く検証していて、すごく参考になる。


はかって止めるとか、大きさをかえるとか言う処理は考えないで、
ページ限界から外に出た場合は表示しないようにしたい場合、
すごく簡単なやりかたとして、cssのposition:fixedを使えばできるというのがあるんだけど、これだと初めからスクロールバーのあるページではつかえないしIE6も対応してない。


そこで、ページ上にそのページと同じ大きさのdivを上乗せして、そのdivに

div {
  position:absolute;
  left:0px;
  right:0px;
  width:/*javascriptでpageWidthをはかって指定*/;
  height:/*上に同じくpageHeight*/;
  background:none;

  overflow:hidden;

}

とやってみて、その中に問題のObjectをappendすればできるかもと考えた。


まぁこれでうまく行くはずなくて、案の定ページ上のobject(リンクとかボタンとか)に触る事ができなくなった。
background=transparent;にしても同じ。(というかtransparentの意味がよく分からない)


それでこんどは、

div {
  /* 前と同じ */
  z-index:-100;
}

とかして、appendするObjectの方をzIndex=100;とかにすればできるかなーと思ったがこれもだめ。
appendしたObjectの方が、今度は上にでてこない。
どうやら、z-indexは同階層内での前後関係らしい。-100された中で100にしても前には出てこないみたい。
でもこれだとモジュールごとに前後関係がつけられそうで、もしそうだとすると使いやすそうだ。


それはそれとして、今度はどうしようかなーと困ってたんだけど、結局こうしたらできた。

div {
  /* 1と同じ */
  visibility:hidden;
}

まず、こうしたら子オブジェクトまでhiddenが適用されるだろうと考えていたのだが、なぜかされないみたい。
appendしたobjectにvisibility=visible;を適応したらあっけなく見えるようになった。
調べてみるとvisibilityは親子関係とは独立して動かせるらしい。
でも、

div {
  /* 1と同じ */
  display:none;
}

だとだめだった。
前に読んだcssの本によると、visibility:hidden;とは、見えはしないがそこにある状態で、display:none;はobject自体を画面から消してしまう状態だ、みたいに書いてあったんだけど、hiddenにしても普通に下のオブジェクト(リンクとかボタンとか)が有効だった。ここら辺の仕様はやはり直感的ではない気がする。
javascriptよりcssのほうがずっと難しいといつも思う。


結構悩んだんだけど書いてみると案外すごく簡単な結論だなー。
あれ？もしかして常識？