Preserve scroll position when removing elements

Question

There is a container with some elements that can be removed from it. If you scroll to the end of the container and remove the last element, the container will automatically "shrink" and move up.

function remove(target) {
    target.remove();
}

body {
  margin: 0;
}
.container {
  overflow-y: scroll;
  height: 200px;
  background-color: gray;
}

.el {
  height: 60px;
  background-color: cadetblue;
  margin: 5px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px; 
  font-size: 20pt;
}

<div class="container fill">
  <div class="el" onclick="remove(this)">1</div>
  <div class="el" onclick="remove(this)">2</div>
  <div class="el" onclick="remove(this)">3</div>
  <div class="el" onclick="remove(this)">4</div>
  <div class="el" onclick="remove(this)">5</div>
  <div class="el" onclick="remove(this)">6</div>
  <div class="el" onclick="remove(this)">7</div>
</div>

What I want: when any element is removed from the container, the container will somehow extend its inner content height in such a way that it will not change its scroll position (i.e. all the elements above the removed one do not change their position). However, I do not want this container to have an extra space at the end defined by CSS height property. I want this space appear only when needed, i.e. when this space becomes invisible after scrolling up, it is impossible to scroll there back anymore.

How can I achieve this with pure HTML5, CSS and JS?

Answer 1

So you want the container adjusts the height of the content if there are not many items left? Then you could use max-height: 200px; instead of height: 200px;.

function remove(target) {
    target.remove();
}

body {
  margin: 0;
}
.container {
  overflow-y: scroll;
  max-height: 200px;
  background-color: gray;
}

.el {
  height: 60px;
  background-color: cadetblue;
  margin: 5px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px; 
  font-size: 20pt;
}

<div class="container fill">
  <div class="el" onclick="remove(this)">1</div>
  <div class="el" onclick="remove(this)">2</div>
  <div class="el" onclick="remove(this)">3</div>
  <div class="el" onclick="remove(this)">4</div>
  <div class="el" onclick="remove(this)">5</div>
  <div class="el" onclick="remove(this)">6</div>
  <div class="el" onclick="remove(this)">7</div>
</div>