CODEWITHSUNDEEP
css
Kuan
Kuan

Reputation: 11389

How to make scrollbar go away when element inside go back from overflow state

All:

I wonder how can I make a DIV recalculate the overflow when the elements inside change size, for example:

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>

The problem is:

Initially, the #inner DIV make the outer container DIV overflow, but after click change size button, it becomes smaller that container DIV, but because the scrollbar of previous overflow take some space(around 17px each), the container still think the inner DIV too large, which should be not. How can I make the outer container re-determine its overflow without consider previous affect?

Any help?

Upvotes: 0

Views: 45

Answers (1)

max
max

Reputation: 8667

You can set overflow: hidden on your outer div and set to auto again. You can change 1000 to 1 for example.

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

Upvotes: 2

Related Questions