时间戳

首页 > 解决方案 > 使 SVG 在移动设备中可滚动

css - 使 SVG 在移动设备中可滚动

问题描述

如何使 svg 在移动设备中水平滚动？

免责声明：以下示例经过简化，重点关注滚动问题。我知道我可以得到一个看起来像这样的可滚动框，div而不是svg. 但我正在努力在 D3中制作一个大宽度的热图。

以下代码可在桌面上滚动，但不能在移动设备上滚动：

svg {
  background: linear-gradient(90deg, blue, yellow);
}
<svg height=300 width=1500></svg>

我尝试遵循为 svg 提供一个具有固定宽度的容器 并使svg 大于容器的建议。但结果是一样的——它适用于桌面，而不是移动设备：

body {
  border: 2px dotted red;
  width: 500px;
}

svg {
  background: linear-gradient(90deg, blue, yellow);
  overflow: scrollbar
}
<svg height=300 width=1500></svg>

通过访问我的jsfiddle的全屏版本，我使用最新版本的 Chrome 和 Firefox 浏览器测试了我的 iPhone 8 上的移动滚动。

根据MDN 网络文档，

溢出属性仅适用于建立新视口的元素

但这并不能解释移动设备和桌面设备之间的差异。而根据Soueidan的说法，

您可以通过 ... 嵌套<svg>s来建立新的视口和用户坐标系

...而且我确实已经在正文中嵌套了一个 svg，因此会建立一个新的视口，使溢出属性适用。

标签： csssvg

解决方案

@G-Cyr 解决了评论中的问题。@G-Cyr 提供的两个 jsfiddles 在移动设备中滚动：jsfiddle.net/3na9v6ps/5或jsfiddle.net/3na9v6ps/6。

我通过添加/embedded/result到网址在手机上对其进行了测试。

@G-Cyr 需要对我的代码进行的唯一更改是overflow: auto在 svg 的容器上使用，而不是在 svg 上使用，并overflow: hidden在容器的容器上使用。

推荐阅读