引き続きelement関数の可能性について探る．もうね，一見不可能な機能も実装可能になるってのはわくわくが止まらないね．
（なんだ，既にサンプルできてるじゃん．みんな考えること同じなのね．）
→css4に延期となったようですorz...
非常に縦長なページがあった際，今どこの辺を表示しているかがわからなくなることがある．スクロールバーの位置で大体の位置はわかるものの，目的の画像がどこにあるかなど具体的に探す対象の場所までは判らない．よって，何らかのインジケータを表示したいケースもあるだろう．
このような場合にelement関数とbackgroundスタイルを組み合わせることでcssだけでこのような要件を満たすことが出来ることが分かった．
サンプルを作ってみた．このようにスクロール位置に応じて左のチャートのハイライト部が移動する．ウインドウ幅を変化させても正常に動作するなど，かなり強力な機構となっている．
ソースは非常に単純．ただし，下記の通りbackgroundの機能をフルに使っているので，カスタマイズする際は注意が必要．別途スクリプトを使って調整すると良いかもしれない．
- サイズの大きなdiv要素「main」とインジケータを表示するdiv「fixed」を用意する．
- mainにはbackground-colorとbackground-imageにそれぞれ画面表示外を表す背景色と，画面表示内部の背景画像を設定する．
背景画像にはbackground-attachement:fixedを指定し，画面上常に同じ位置に表示されるようにする．
背景画像はbackground-size:100% 100%によりで画面サイズに引き伸ばされる．
また，background-repeat:no-repeatを指定し，画面範囲外に背景画像が配置されるのを防ぐ．
なおここではlinear-gradient関数を使って画像を自動生成している． - fixedには background-imageにelement関数を使い，上記main要素を指定する．
<!DOCTYPE html>
<html>
<head>
<title>スクロール地点を表示する</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body{
margin-left:100px;
}
#main{
background-color:gray;
background-image:-moz-linear-gradient(white, white);
background-repeat:no-repeat;
backgrond-size:100% 100%;
background-attachment:fixed;
font-size:400px;
}
#fixed{
position:fixed;
left:0;
top:0;
width:100px;
height:300px;
border:1px solid black;
background-image:-moz-element(#main);
background-size:100% 100%; }
</style>
</head>
<body>
<div id="main">
a b c d e f g h i j k l m n o p q r s t u v w x y z
</div>
<div id="fixed"></div>
</body>
</html>
投稿
0 件のコメント:
コメントを投稿