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

【问题标题】：Creating scrollbar with overflow doesn't work?创建带有溢出的滚动条不起作用？
【发布时间】：2020-05-07 21:24:03
【问题描述】：

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

这是我的 html 部分。

<svg width="1300px" height="500px" 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

【问题讨论】：

标签： html css vue.js svg

【解决方案1】：

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

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

这确实会显示滚动条。

【讨论】：