创建带有溢出的滚动条不起作用？

Posted 2023-02-22

【中文标题】创建带有溢出的滚动条不起作用？

【英文标题】：Creating scrollbar with overflow doesn't work?

【发布时间】：2020-05-07 21:24:03

【问题描述】：

我在 Vue 中编写了一个白板。只有一个 svg 元素，我添加了其他 svg 元素，如路径。我想在这个 svg 中滚动并看到这个例子，这非常好。

http://jsfiddle.net/qTFxJ/13/

这是我的 html 部分。

<svg   style="overflow-x:scroll; overflow-y:scroll;" viewBox="0 0 1300 500" class="flex-item" id="whiteboard" ref="whiteboard"/>

我也有它的风格部分。

#whiteboard 
  /*position: absolute;*/
  /*width: 100%;
  height: 100%;*/
  background: rgb(255, 255, 255);
  z-index: 1;

我不知道为什么它不起作用。也许是因为 Vue 我不知道 :(

感谢您的帮助：D

【参考方案1】：

在您链接的示例中，SVG 实际上并没有滚动。但是，您看到的滚动条是div 的一部分。 为了达到同样的效果，您必须将最大尺寸的 SVG 包装到屏幕尺寸的 div 中，如下所示：

<div style="width: 100px">
   <svg   style="overflow-x:scroll; overflow-y:scroll;" viewBox="0 0 1300 500" class="flex-item" id="whiteboard" ref="whiteboard"></svg>
</div>

这确实会显示滚动条。