Question

大家好我正在研究html和javascript这里是我的代码

<div class = "outer">
 <div class = "inner1 width="234" height="400" style="float: left">
   <svg width="100" height="400" style="float: left;">
      // some thing
   </svg>
 </div>
 <div class = "inner2" width="234" height="400" style="float: left overflow : scroll">
   <svg width="200" height="400" style="float: left;">
      <g class="c1" transform="translate(0,20)">
         <g>
          <text class="c1_name"></text>
          <text class="c1_value"></text>
         </g>

         <g>
          <text class="c2_name"></text>
          <text class="c2_vaue"></text>
         </g>
         <g>
          <text class="c3_name"></text>
          <text class="c3_value"></text>
         </g> 
                    .
                    .
                    . 
         // g added dynamically below the previous one

      </g>
   </svg>
 </div>
</div>

这里我想让我的div inner2可滚动，这样当添加一个新的g并且div的大小变小以包含所有g时它变得可滚动。我有滚动条出现，但是当我的新元素添加但我无法看到它时它们也被禁用。任何人都可以指导我在哪里错了以及如何纠正这个

顺便说一句，我正在使用变换属性

由于

Answer 1

如果您只想在需要时显示滚动条，则需要使用overflow:auto;。

Answer 2

在div上，没有width＆amp; height属性，使用css（例如。style="width: 999px; height: 999px;"），还需要overflow: auto / overflow: scroll（您可以操纵每个滚动条独立宽度overflow-x＆amp; {{ 1}}）。

如何在添加svg：g时在div中添加滚动条

2 个答案: