javascript - 在 HTML/Javascript 中滚动

Question

我一直在尝试实现滚动条来滚动 Canvas 的内容。

我所做的基本上是创建一个 div 并将溢出设置为 scroll 用于滚动条，以及一个内部 div 具有不同的宽度/高度根据 Canvas 内容的宽度/高度。

当我在两个滚动条中的任何一个上收到 onscroll 事件时，我可以使用 scrollLeft 和 scrollTop 属性来设置多少我需要移动 Canvas 内容的像素。

我注意到虽然垂直滚动条按预期工作，但更改水平滚动条的内部宽度没有做任何事情。

我的印象是这样的；

<div id='outer'>
    <div id='inner'>
    </div>
</div>

<style>
     div#outer {
         width : 500px;
         height : 50px;
         overflow-x : scroll;
     }

     div#inner {
         width : 20000px;
     }
</style>

将创建一个宽度为 500px 的 div block ，带有水平滚动条，允许我们滚动内部 div 的宽度，20000px。

但出于某种原因，它不适用于水平滚动条 ( example )，而适用于垂直滚动条 ( example )。

为什么会这样？这与我将 style.width 用于内部 div 的方式有关吗？

我该怎么做才能获得有效的水平滚动条？

Answer 1

如果您提供最小高度或向宽度大于容器的内部元素添加内容，它会起作用。

bar.style.minHeight = '1px';

Fiddle

因此，我敢打赌，没有内容(0px 高度)的 block 元素与 display:none 元素的显示方式类似。