0

キャンバスのコンテンツをスクロールするスクロール バーを実装しようとしています。

私がやったことは、基本的に、スクロールバー用にdiv設定されたオーバーフローと、キャンバスのコンテンツの幅/高さに応じて幅/高さが異なるインナーを作成することです。scrolldiv

onscroll2 つのスクロール バーのいずれかでイベントを取得する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ますか?

水平スクロールバーを機能させるにはどうすればよいですか?

4

1 に答える 1

2

最小の高さを指定するか、コンテナーよりも幅の広い内部要素にコンテンツを追加すると機能します。

bar.style.minHeight = '1px';

フィドル

そのため、コンテンツ（0px高さ）のないブロック要素は、要素と同様に表示されると思いdisplay:noneます。

于 2012-08-08T12:17:36.470 に答える