IEの「explorercanvas」で作ったCANVASがスクロール

解決済

質問者：yyr446
質問日時：2010/10/08 12:10
回答数：1件

IEの「explorercanvas」で作ったCANVASがスクロール出来ない

HTML5の<canvas>要素を、擬似的に使えるようにした「explorercanvas」↓
http://code.google.com/p/explorercanvas/
ですが、これを使って<canvas>要素を<div>要素の中に配置したんですが、
親の<div>ボックスをスクロールしても、canvasがスクロールされません。
本物の<canvas>要素はちゃんと出来ます。（FirefoxとChromeで確認）
何か代替策ないでしょうか？（canvas内に再描画しろってか..）

（実験したコード）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Canvas Test</title>
<style type="text/css">
</style>

</head>
<body>
<p>CANVAS</p>
<h2 style="text-align:center">Canvas TEST By HTML5 or IE(excanvas.js)</h2>
<div id="hoge" style="width;500px;overflow:scroll;border:solid 1px gray"></div>
<p>イメージ</p>
<div id="fuga" style="width;500px;overflow:scroll;border:solid 1px gray"></div>
<script type="text/javascript">

//CANVASの場合
　var container1 = document.getElementById("hoge");
　var canvas = document.createElement("canvas");
　canvas.width = 2000;
　canvas.height = 500;
　container1.appendChild(canvas);
　if (typeof(G_vmlCanvasManager) != 'undefined')
　 canvas = G_vmlCanvasManager.initElement(this.canvas);
　var ctx = canvas.getContext('2d');
　var img = new Image();
　img.src = "/image/mio.jpg" + "?" + new Date().getTime();
　 img.onload = function() {
　　　ctx.drawImage(img,0,0,2000,500);
　 }
　container1.scrollLeft = 500;

//imgの場合
　var container2 = document.getElementById("fuga");
　var img2 = new Image();
　img2.src = "/image/yui.jpg" + "?" + new Date().getTime();
　img2.style.width="2000px";
　img2.style.height="500px";
　container2.appendChild(img2);
　container2.scrollLeft = 500;

</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： taloo
回答日時：2010/10/08 16:27

<canvas>直下の<div>がposition:absoluteになっているので、styleを付けておくとどうでしょうか。

position:relativeにすることで、弊害がどの程度出るかわかりませんが。
（floatが使えなくなるとか、近くにある要素のmarginが消えるとか）

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
IEの開発者ツールで見ると確かにそうなってますね。

<style type="text/css">
canvas > div {position: relative !important;}
</style>

で、一応スクロール出来ました。

他の機能がどうなるか、試してみます。

目的は、CANVASを使ったスライドショー作成です。

通報する

お礼日時：2010/10/08 17:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！