javascript – Fixed lower bound when increasing block height

Question:

There is a block at the very bottom of the page. When you click on it, its height increases. But the scrolling of the page stays in place and the block grows down.

<div class="main">
  <div class="block" id="open_block">
  </div>
</div>

Something like this: https://jsfiddle.net/b6wd5s4m/

How to make it so that when the block is expanded, its bottom border is fixed and remains at the bottom border of the screen, and the page seems to scroll down?

Answer:

Then so, docks
– https://learn.javascript.ru/coordinates
– https://learn.javascript.ru/metrics-window

var open_block = document.getElementById('open_block');

open_block.addEventListener('click', function() {
  open_block.classList.toggle('open_block');
  var bot = open_block.getBoundingClientRect().bottom;
  window.scrollTo(0, bot);
});
.block {
  margin-top: 300px;
  width: 100%;
  height: 100px;
  background-color: #04a513;
  transparent: 1s;
}
.open_block {
  height: 300px;
  transparent: 1s;
}
<div class="main">
  <div class="block" id="open_block">

  </div>
</div>
Post Views: 2
Scroll to Top