キャンバスのコンテンツをスクロールするスクロール バーを実装しようとしています。
私がやったことは、基本的に、スクロールバー用にdiv
設定されたオーバーフローと、キャンバスのコンテンツの幅/高さに応じて幅/高さが異なるインナーを作成することです。scroll
div
onscroll
2 つのスクロール バーのいずれかでイベントを取得するscrollLeft
と、 とscrollTop
プロパティを使用して、キャンバス コンテンツを移動するために必要なピクセル数を設定できます。
垂直スクロールバーが意図したとおりに機能している間、水平スクロールバーの内側の幅を変更しても何も起こらないことに気付きました。
私は次のような印象を受けました。
<div id='outer'>
<div id='inner'>
</div>
</div>
<style>
div#outer {
width : 500px;
height : 50px;
overflow-x : scroll;
}
div#inner {
width : 20000px;
}
</style>
div
水平スクロールバーを備えた幅 500pxのブロックを作成し、内側div
の 20000px の幅をスクロールできるようにします。
しかし、何らかの理由で、水平スクロールバー (例) では機能しませんが、垂直スクロールバー (例) では完全に機能します。
なぜこれが起こるのですか?これは、私がstyle.width
インナーに使用している方法と関係がありdiv
ますか?
水平スクロールバーを機能させるにはどうすればよいですか?