Question

我有一个垂直滚动条，显示为无法点击。垂直滚动条可见，但条形图似乎已禁用。

对于我有的文字区域：

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow-y:scroll; overflow-x:hidden; vertical-align:middle;"></textarea>

编辑：我发现我脚本中的另一个div附加了“position：absolute”。当这被改为相对时，y滚动条是可点击的。想知道为什么这个位置：绝对影响滚动条？

有没有办法明确启用垂直滚动条？

Answer 1

垂直条显示，因为您有overflow-y: scroll;此属性专门使条形图始终可见。它看起来禁用的原因是文本区域中没有足够的内容使其可滚动。

如果您添加的内容超过文本框的高度，则该栏将可滚动。

这是你的代码中包含大量文本，你会看到它可以滚动。删除所有文本然后它被禁用。

https://jsfiddle.net/741232t2/1/

如果您希望仅在可以滚动时显示该栏，您想要执行overflow-y: auto;

下一个小提琴有overflow-y: auto;，如果你删除那里的所有文字，你会看到该栏也消失了。

https://jsfiddle.net/741232t2/2/

我建议您使用单个溢出调用而不是2，例如：overflow: auto;。它会完成你想要的工作。

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow:auto; vertical-align:middle;">/textarea>

https://jsfiddle.net/741232t2/3/

Answer 2

元素上的Css滚动条是溢出：自动;

这是您的代码：

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow-y:scroll; overflow-x:hidden; vertical-align:middle;"></textarea>

使用此选项可在内容溢出时自动滚动元素：

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow:auto; vertical-align:middle;"></textarea>

这比在元素层的不同侧调用溢出两次更有效。

Html垂直滚动条未启用？

2 个答案: