在HTML/Javascript中滾動

Question

我一直在嘗試實現滾動條來滾動畫布的內容。

我所做的基本上是創建一個div與溢流設定爲scroll用於滾動條，和一個內div與根據畫布的內容的寬度/高度變化的寬度/高度。

當我在任意一個滾動條的onscroll事件，我可以用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> 

將創建的寬度500像素一個div塊，與水平滾動條，使我們能夠通過內div的寬度，20000px滾動。

但由於某種原因，它不適用於水平滾動條（example），同時適用於垂直滾動條（example）。

爲什麼會發生這種情況？這與我如何使用style.width作爲內部div有關嗎？

我能做些什麼來獲得一個水平滾動條？

Answer 1

它適用於給定最小高度或將內容添加到寬度大於容器的內部元素。

bar.style.minHeight = '1px'; 

Fiddle

至於原因，我的選擇是，與沒有內容（0px高度）的塊元件被類似地顯示給display:none元件。