Overflow-x：滚动！重要 不能在三星互联网上使用翻译的 SVG

Question

我有一个水平填充的div容器，里面装满了一组动态绘制的SVG图纸。由于容器的宽度超过窗口的宽度，因此将应用overflow-x: scroll !important。但是，即使它可以在大多数浏览器中工作，三星互联网浏览器也不会使div可滚动。我能做些什么吗？

编辑：jQuery的scroll()函数也不会触发alert事件

EDIT2：我对每个SVG绘图执行动态translate()，将它们排列成网格布局

Answer 1

我找到了这个问题的原因：

正如我所说，我正在动态绘制 SVG 元素。我也transform: translate()他们。但这不会使overflow-x在三星互联网上工作。相反，我必须为每个 svg 绘图创建一个包装器div并翻译此包装器而不是 svg 本身。

所以代替这个结构：

<div id="big-wrapper">
<svg style="transform: translate([dynamic value to order all svgs in a grid])"></svg>
<svg style="transform: translate([dynamic value to order all svgs in a grid])"></svg>
<svg style="transform: translate([dynamic value to order all svgs in a grid])"></svg>
...
</div>

我需要这个结构：

<div id="big-wrapper">
<div id="small-wrapper1" style="transform: translate([dynamic value to order all svgs in a grid])">
<svg></svg>
</div>
<div id="small-wrapper2" style="transform: translate([dynamic value to order all svgs in a grid])">
<svg></svg>
</div>
<div id="small-wrapper3" style="transform: translate([dynamic value to order all svgs in a grid])">
<svg></svg>
</div>
...
</div>