在HTML/Javascript中滚动

我一直在尝试实现滚动条来滚动画布的内容

我所做的基本上是为滚动条创建一个

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>

外分区{
宽度：500px；
高度：50px；
溢出-x：滚动；
}
内分区{
宽度：20000px；
}

将创建一个宽度为500px的

div

块，带有一个水平滚动条，允许我们滚动内部

div

，20000px的宽度

但由于某些原因，它不适用于水平滚动条（），而适用于垂直滚动条（）

为什么会发生这种情况？这与我如何为内部

div

使用

style.width

有关吗

---

如何才能获得一个正常工作的水平滚动条？

如果您为内部元素提供最小高度或添加宽度大于容器的内容，则该滚动条可以正常工作

bar.style.minHeight = '1px';

因此，我打赌没有内容的块元素（

0px

height）的显示方式与

display:none

元素类似