部分スクロールではまった

GoogleMapsみたいなスクロール処理を作ったと思ったら、IEだと表示領域からスクロールアウトした部分が画面上に出たままフレームの上に重なる感じになってしまっていた。ふと思いついて修正したらうまくいったので常識かもしれないけどメモしておく。

前提の例

<div id="frame">
 <div id="object">
 </div>
</div>

div#frame{
 width:100px;
 height:100px;
 overflow:hidden;
}
div#object{
 width:1000px;
 height:100px;
}

ダメなやりかた

#objectをposition=relativeにして、left、topを増減させてスクロール。これだと、firefoxだと意図通りに動くけどIEだと#frameからはみ出した部分が見えてしまう。

大丈夫なやりかた

#objectのmargin-left、margin-topを増減させてスクロール。これならどっちでも大丈夫。
ただ、#objectの背景画像は大丈夫だけど、#objectにimg要素を配置すると、これだけは#frameの外であっても表示されてしまう。どっからどこまでが表示領域かを管理しておいてはみ出たら非表示にしたりしてるんだけど、これはスマートじゃないなあ。