Question

我有以下代码

<div id="someDiv" style="float: right; margin-right: -350px; position: relative; overflow-x: hidden; overflow-y: auto;">
<svg class="someSvgClass" width="105">
<g>..</g>
<g>..</g>
...
</svg>
</div>

这个div包含另一个具有固定高度的div。这些“g”元素是使用JavaScript动态添加的。因此，当“g”元素的数量增加时，我希望滚动条

在IE11中，当“g”元素的数量很高时，我能够看到滚动条。但是对于相同的元素，我无法在Firefox和Chrome中看到滚动条有人请告诉我这里出了什么问题这是一个示例fiddle

Answer 1

我不是SVG专家，我从未使用它，但似乎SVG不会改变高度。如果您将高度设置为SVG，则可以：http://jsfiddle.net/u5ymhmht/7/

添加一行时，在js中的实际解决方案，将行的高度添加到SVG。

P.S。对不起以前的误解。

svg {
    height:500px;
}

#Someid {
    height: 150px;
    overflow-x: hidden;
    overflow-y auto;
}

<div id="Someid">
    <svg  width="105">
    <g transform="translate(10,5)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,20)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,35)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,50)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,65)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,80)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        
        <g transform="translate(10,95)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,110)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        
        <g transform="translate(10,125)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,140)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        
        <g transform="translate(10,155)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,170)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,185)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,200)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
    </svg>
</div>

css overflow-y：自动无法在firefox和chrome中运行

1 个答案: