css - 当元素内部从溢出状态返回时如何使滚动条消失

Question

全部:

我想知道当里面的元素改变大小时如何让DIV重新计算溢出，例如:

function changeSize(){
    d3.select("#inner")
        .style({
            width: "195px",
            height: "195px"
        })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style="width: 200px; height:200px; background-color: lightblue; overflow:auto;">
    <div id="inner" style="width: 250px; height:250px; background-color: lightpink;">
        this is a inner eleement
    </div>
</div>
<button onclick="changeSize()">CHANGE SIZE OF INNER ELEMENT</button>

问题是:

最初，#inner DIV 使外部容器DIV 溢出，但点击更改大小按钮后，容器DIV 变小，但由于先前溢出的滚动条占用了一些空间(大约17px每个)，容器仍然认为内部 DIV 太大，这应该不是。如何在不考虑之前影响的情况下，让外层容器重新判断溢出？

有什么帮助吗？

Answer 1

您可以在outer div 上设置overflow: hidden 并再次设置为auto。例如，您可以将 1000 更改为 1。

function changeSize() {
  d3.select("#inner").style({
    width: "195px",
    height: "195px"
  });
  d3.select("#outer").style({
    overflow: 'hidden'
  });
  setTimeout(function() {
    d3.select("#outer").style({
      overflow: 'auto'
    });
  }, 1000);
}

CODEPEN