2通りの選択肢があった。
まず、CSSのoverflowを利用する方法。しかし、これはHTMLの構造を変えなければならない。つまり、スクロールと連動させない要素以外を全て一つのdivで括らなければならない。さらに問題がある。背景画像を固定した場合と同じ問題が起るのだ。スクロールが重くなるのである。ホイールクリックで自動スクロールさせたとき、動きが滑らかでなくなってしまう。これはおそらくIEがCSSのposition:fixed
をサポートしても残る問題だと思われる(推測)。
もう一つの選択肢。これは、HP-DESIGN.NETで配布しているELEVATING NAVIGATORような、setTimeout()
等を使ったエレメントの再配置である。これなら、ほんの10行程度のスクリプトで済むし、スクロールも重くならない。何となく鬱陶しいのが最大の問題点ではあるが、止むを得ない。この方法を採用することにした。
他にも、イベントを利用して何とかする方法もありそうだが、イベント関係が良く分からない。bodyにonscroll属性をつければいいのだが、要するにJavaScriptで代替させるとしたらどうすればいいのか皆目見当がつかない。setAttribute
では多分駄目。addEventListener()
が使えさえすれば。
また、あの重ったいライブラリを見に行かなきゃ。でも、W3C勧告の Document Object Model でやるからこそ、やりがいを感じているわけで。