諸事情あって、iframeの中身をフレーム外側のページからJavaScriptでスクロールできるのを作った。
ふつうは別ドメインのページをiframeに読み込むとスクロールできないんだけど、(marginに負の値を入れたりして)iframeごと上下左右に動かしたり、iframeの外側にbox要素2つ付けてはみだした部分を表示しないようにcssでなんか色々やったりしたらそれらしい物ができた。

デモ XFrame.js

shokai/xframe.js · GitHub


使い方は簡単である

js読み込んで

<script src="xframe.js"></script>

XFrameを出したい箱を作って
<div id="tv"></div>


読み込む
var xframe = new XFrame("div#tv");
xframe.load("http://shokai.org");


あとは相対スクロールしたり絶対位置指定したりできる
xframe.scrollX(10);
xframe.scrollY(100);
xframe.top = 200;
xframe.left = 50;


マウスによるスクロールを許可するかどうかも決めれる
xframe.mouseScroll = true;
xframe.mouseScroll = false;


XFrame自体の大きさは外側のdivにピッタリになるようにできているので、
この例だと<div id="tv">にcssでwidthやheight付ければサイズ決められる。

無茶っぽい実装だけど不思議と主要なブラウザでは動いちゃった。(safari, firefox, chrome, iOS, Android)
でも発想としては昔のFlashなんかでよく使うような方法だと思う。