Question

我将样式设置为overflow-x：scroll;溢出-y：可见;在parentNode中，在这种情况下只会在我的输出中显示水平滚动条...但是两个滚动条都会出现在我的输出中（因为parentNode高度＆gt; childNode高度）。我做错了什么？如何解决这个问题？

这是我的代码，

<div id="chartContainer_container" style="position: relative;">
       <div style="position: absolute; width: 63px; height: 52px;left: 230px; top: 110px; overflow-x: scroll; overflow-y: visible;border-width: 1px; border-color: 'black'; border-style: solid;" id="legend_container">
            <svg style="height: 37px; width: 139px;" class="e-designerhide" id="legend_container_svg">
                    <g id="container_svg_Legend">
                        <g cursor="pointer" id="container_svg_Legend0">
                            <path lgndctx="true" d="M 9 16.5 L 12 16.5 L 12 23.5 L 9 23.5 Z M 13.5 11 L 16.5 11 L 16.5 23.5 L 13.5 23.5 Z M 18 18.5 L 21 18.5 L 21 23.5 L 18 23.5 Z" opacity="1" stroke="transparent" stroke-width="1" fill="#77A7FB" id="container_svg_LegendItemShape0"></path>
                            <text lgndctx="true" text-anchor="start" font-weight="Regular" font-family="Segoe UI" font-style="Normal" font-size="12" fill="#636363" y="22.75" x="30" id="container_svg_LegendItemText0">SumofBugCount</text>
                        </g>
                    </g>
            </svg>
        </div>
    </div>

示例链接：https://jsfiddle.net/xq7kdx6o/

提前致谢..

Answer 1

SVG的大小：

element.style {
    height: 37px;
    width: 139px;
}

哪个大于父级：

width: 63px;
height: 52px;

将父亲的宽度设为140px。你在父母身上有这种风格：

overflow-x: scroll;
overflow-y: visible;

您需要使用：

<div style="position: absolute; width: 140px; height: 52px;left: 230px; top: 110px; border-width: 1px; border-color: 'black'; border-style: solid;" id="legend_container">

真的？父母小一点吗？

小提琴：https://jsfiddle.net/xq7kdx6o/1/

如果您只想要垂直滚动，请使用overflow-y: hidden。

小提琴：https://jsfiddle.net/xq7kdx6o/2/

垂直滚动条显示不正确

1 个答案: