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

【问题标题】：How to make scrollbar go away when element inside go back from overflow state当内部元素从溢出状态返回时如何使滚动条消失
【发布时间】：2016-05-19 16:26:22
【问题描述】：

全部：

我想知道当里面的元素改变大小时如何让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>

问题是：

最初#innerDIV 使外层容器DIV 溢出，但点击更改大小按钮后，容器DIV 变小，但由于上一次溢出的滚动条占用了一些空间（每个17px 左右），容器仍然认为内部DIV太大，应该不是。如何在不考虑之前影响的情况下让外部容器重新确定其溢出？

有什么帮助吗？

【问题讨论】：

标签： css

【解决方案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

【讨论】：

谢谢，它可以工作，但我想知道为什么它需要异步操作，我尝试了类似的模式，没有 setTimeout 并在大小更改之前放置溢出隐藏设置，但它不起作用
谢谢，除了一些额外的代码和flash（当我们将溢出设置为隐藏时，滚动条后面的内容（比如它的大小仍然大于容器）会闪烁）
嗯可能的解决方案：您可以将 overflow 属性的值从 scroll 更改为 auto 而不是 hidden 到 auto 仅当新大小大于当前大小时，并且当新尺寸小于内盒时，从hidden 更改为auto。
或者更简单：仅在新尺寸值小于内框时更改overflow 属性。